输入元素不消耗全部 space 就行了

Question

我有以下表格：

<form class="form-group">
    <input class="input" type="email" placeholder="Email" >
    <div class="form-group split-input">
      <input class="input" type="text" placeholder="043">
      <input class="input" type="text" placeholder="Phone Number">
    </div>
<form>

拆分输入不像单行输入那样占用所有 space。问题出在哪里？

.form-group {
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    width:12.5rem
  }

.input{
  padding:.758rem;
  width:100%;
  margin:.3125rem
  }

.split-input{
  display:flex;
  flex-flow:row;
  }

.split-input :first-child{
  flex-basis:35%
}

请看一下https://jsfiddle.net/o2j10goc/

html{box-sizing:border-box;}
*,*::before,*::after{box-sizing:inherit}
fieldset{border:0;padding:0;margin:0;min-width:0}
input{border-style:none}

.form-group {
    box-sizing:border-box;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    width:12.5rem
  }
.input{
  padding:.758rem;
  width:100%;
  margin:.3125rem
  }
.split-input{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row;
  flex-flow:row
  }
.split-input :first-child{
  -ms-flex-preferred-size:35%;
  flex-basis:35%
}

<form class="form-group">
  <fieldset>
    <input class="input" type="text" placeholder="First Name" >
    <input class="input" type="text" placeholder="Last Name" >
    <input class="input" type="email" placeholder="Email" >
    <div class="form-group split-input">
      <input class="input" type="text" placeholder="043">
      <input class="input" type="text" placeholder="First Name">
    </div>
  </fieldset>
</form>

Answer 1

有两个问题：flex-shrink 已启用，input 元素上的边距也适用于子容器中的输入。

问题#1

默认情况下，弹性项目设置为 flex-shrink: 1。这意味着它们可以缩小到您设置的 width 或 flex-basis 以下。这允许它们适合容器。

所以不只是：

flex-basis: 35%

尝试：

flex-basis: 35%;
flex-shrink: 0;

或者更好，如 recommended by the spec:

flex: 0 0 35%;

Authors are encouraged to control flexibility using the flex shorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses.

问题#2

您已将 margin 规则应用于所有 input 元素。当输入位于嵌套容器 (.split-input) 中时，此边距将适用，这会导致它们相对于父级中的输入更短。

你有这个：

.input {
  padding: .758rem;
  width: 100%;
  margin: .3125rem;
}

因此将此添加到您的代码中：

.split-input {
   margin: 0 .3125rem
}
.split-input :first-child {
   margin-left: 0;
}
.split-input :last-child {
   margin-right: 0;
}

revised fiddle

html{box-sizing:border-box;}
*,*::before,*::after{box-sizing:inherit}
fieldset{border:0;padding:0;margin:0;min-width:0}
input{border-style:none}

.form-group {
    box-sizing:border-box;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    width:12.5rem
  }
.input{
  padding:.758rem;
  width:100%;
  margin:.3125rem;
  border: 1px dashed red;
  }
  
  /* ADJUSTMENTS */
.split-input{
  display:flex;
  flex-flow:row;
  margin: 0 .3125rem
  }
.split-input :first-child{
  flex: 0 0 35%;
  margin-left: 0;
  }

.split-input :last-child{
   margin-right: 0;
}

<form class="form-group">
  <fieldset>
    <input class="input" type="text" placeholder="First Name" >
    <input class="input" type="text" placeholder="Last Name" >
    <input class="input" type="email" placeholder="Email" >
    <div class="form-group split-input">
      <input class="input" type="text" placeholder="043">
      <input class="input" type="text" placeholder="First Name">
    </div>
  </fieldset>
</form>

Answer 2

这是您的更新 fiddle。只需在 .input class 中添加 margin-top 并在 css 文件的第一个输入中添加 margin-right 而不是 margin

https://jsfiddle.net/o2j10goc/4/

     .input{
       padding:.758rem;
       width:100%;
       margin-top:.3125rem
      }
     .first{
       margin-right:5px;
     }

Answer 3

我删除了输入字段的左右边距。导致字段离开其容器的边距。对于拆分字段，我向第一个输入字段添加了边距，并使其容器 100% 使其响应；

html{box-sizing:border-box;}
*,*::before,*::after{box-sizing:inherit}
fieldset{border:0;padding:0;margin:0;min-width:0}
input{border-style:none}
body {
 background-color: grey;
 }
.form-group {
    box-sizing:border-box;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    width:12.5rem
  }
.input{
  padding:.758rem;
  width:100%;
  margin:.3125rem 0; /**Changed**/
 }
.split-input{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row;
  flex-flow:row;
  width: 100%;
  }
.split-input :first-child{
  -ms-flex-preferred-size:35%;
  flex-basis:35%;
  margin-right: .3125rem; /**Added**/
}

<form class="form-group">
  <fieldset>
    <input class="input" type="text" placeholder="First Name" >
    <input class="input" type="text" placeholder="Last Name" >
    <input class="input" type="email" placeholder="Email" >
    <div class="form-group split-input">
      <input class="input" type="text" placeholder="043">
      <input class="input" type="text" placeholder="First Name">
    </div>
  </fieldset>
</form>

输入元素不消耗全部 space 就行了

Input elements not consuming all space on the line

html

css

flexbox