输入元素不占用线上的所有空间

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>

分割输入不像单线输入那样占用所有空间。问题在哪里？

.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项目设置为flex-shrink: 1。这意味着他们可以缩小到您设置的width或flex-basis以下。这允许它们适合容器。

所以不仅仅是：

flex-basis: 35%

尝试：

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

或者更好的是，recommended by the spec：

flex: 0 0 35%;

  

鼓励作者使用flex简写来控制灵活性   而不是直接用它的速记属性，作为速记   正确地重置任何未指定的组件以适应常见   使用

问题＃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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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> 

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是你的更新小提琴。只需在.input类中添加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>