删除输入字段右侧的填充

Question

我有这个带有多个输入字段的弹性框。但是，我无法让它看起来像我想要的那样。代码如下：

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

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

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

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

Answer 1

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

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

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