html - 将输入字段排成一行以适应整个容器宽度

Question

我尝试将三个输入字段排成一行，彼此相邻留出一点空间，这样看起来并不奇怪。无论如何，第三个输入总是换行，这是为什么以及如何解决？

我要达到的效果，看图

HTML:

<div id="form">
<form>
    <input type="text">
    <input type="text">
    <input type="text">
</form>
</div>

CSS:

#form{
width: 600px;
border: 1px solid black;
}

#form input {
width: 33.33%;
display: inline-block;
margin: 0 1.1% 0 0;
padding: 0;
}

Answer 1

减少输入的宽度百分比。这些百分比加上利润率。

#form {
  width: 600px;
  border: 1px solid black;
}
#form input {
  width: 31.63%;
  display: inline-block;
  margin: 0 1.1% 0 0;
  padding: 0;
}
#form input:last-child {
  margin-right: 0
}

<div id="form">
  <form>
    <input type="text">
    <input type="text">
    <input type="text">
  </form>
</div>

或者，如果你能支持flex布局，这是最干净的。 不需要边距，因为 justify-content: space-between 会处理间距，只要输入百分比允许(添加到 < 100%)。

#form > form {
  width: 600px;
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
}
#form input {
  width: 31%;
}

<div id="form">
  <form>
    <input type="text">
    <input type="text">
    <input type="text">
  </form>
</div>