Question

我的Flexbox有多个输入字段。但是，我不能让它看起来像我想要的那样。这是代码：

＆＃13;

.inputSettings {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 750px;
}

.inputSettings > form {
  background: red;
  border: 1px solid yellow;
  flex: 1;
}

.inputSettings > form > input {
  width: 165px;
  height: 30px;
  border-radius: 5px;
}

＆＃13;

<div class="inputSettings">
  <form>
    <label>First Name</label>
    <input type="text" id="fname" name="fname">
  </form>
  <form>
    <label>First Name</label>
    <input type="text" id="fname" name="fname">
  </form>
  <form>
    <label>First Name</label>
    <input type="text" id="fname" name="fname">
  </form>
  <form>
    <label>First Name</label>
    <input type="text" id="fname" name="fname">
  </form>
  <form>
    <label>First Name</label>
    <input type="text" id="fname" name="fname">
  </form>
  <form>
    <label>First Name</label>
    <input type="text" id="fname" name="fname">
  </form>
</div>

＆＃13;

JSfiddle：https://jsfiddle.net/rz94hwbv/2/

我想要的是以最左边的输入字段边框接触框的左边框的方式均匀地间隔该Flexbox内的输入字段，而最右边的输入字段的边框接触最右边边界。正如您所看到的，每个输入字段的右侧总是有一些填充。我尝试了所有我能想到的东西，但我无法想出一个像样的解决方案。任何帮助将不胜感激。

Answer 1

我看到的问题是flex:1;与.inputSettings > form > input的有限宽度形成鲜明对比。如果您希望字段触及两侧，则输入需要灵活增长。

＆＃13;

.inputSettings {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 850px;
  border-right: 12px solid purple;
}

.inputSettings > form {
  background: red;
  border: 1px solid yellow;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.inputSettings > form > input {
    border-radius: 5px;
}

＆＃13;

<div class="inputSettings">
<form>
  <label>First Name</label>
  <input type="text" id="fname" name="fname">
</form>

<form>
  <label>First Name</label>
  <input type="text" id="fname" name="fname">
</form>
  
  <form>
  <label>First Name</label>
  <input type="text" id="fname" name="fname">
</form>
  
  <form>
  <label>First Name</label>
  <input type="text" id="fname" name="fname">
</form>
  
  <form>
  <label>First Name</label>
  <input type="text" id="fname" name="fname">
</form>
  
  <form>
  <label>First Name</label>
  <input type="text" id="fname" name="fname">
</form>
  
  <form>
  <label>First Name</label>
  <input type="text" id="fname" name="fname">
</form>
</div>

＆＃13;

删除输入字段右侧的填充

1 个答案: