如何在父 div 的一行上放置多个输入？ [复制]答案

【问题标题】：How to fit a number of inputs on one line in parent div? [duplicate]如何在父 div 的一行上放置多个输入？ [复制]
【发布时间】：2018-08-22 04:31:37
【问题描述】：

我正在尝试将 5 个输入放在一行上。很简单，我想。我有一个父 div，它的左右两边都有一些边距。我在里面放入了 20% 宽度的输入（5 x 20 = 100%）。但是最后一个输入到底部，没有理由？有人知道为什么以及如何解决这个问题吗？

<body style="background: orange;">
  <div style="margin-left:10px; margin-right:10px;">	
    <form>
      <input style="width: 20%; padding:0; margin:0;" type="text">
      <input style="width: 20%; padding:0; margin:0;" type="text">
      <input style="width: 20%; padding:0; margin:0;" type="text">
      <input style="width: 20%; padding:0; margin:0;" type="text">
      <input style="width: 20%; padding:0; margin:0;" type="text">
    </form>
  </div>
</body>

【问题讨论】：

边框和空白

标签： html css margin padding

【解决方案1】：

我建议使用 flexbox。

form {
  display: flex;
}

input {
  flex: 1;
  min-width: 0;
}

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

为什么您的示例不起作用是因为：

<input> 是内联级别，它还具有从浏览器默认样式表设置的默认填充和边框。
输入框之间也有空白，它们也会被渲染。

要使用原始方法修复它，您可以这样做：

form {
  font-size: 0; /* remove white space */
}

input {
  font-size: 16px; /* reset font size */
  width: 20%;
  box-sizing: border-box; /* make border and padding part of width and height */
}

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

您还可以浮动输入框，这样空白就不会被渲染。

form:after { /* clear floats */
  content: "";
  display: table;
  clear: both;
}

input {
  float: left;
  width: 20%;
  box-sizing: border-box;
}

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

【讨论】：

虽然这是在现代网络中如何做到这一点的最佳答案，但如果您还解释了为什么他的方式不起作用，它可能对提问者有用。（例如，因为逻辑上它似乎像 5x20%=100% 但实际上不是。）
我同意 Roddy 的观点；）因为我想这对他来说会有点复杂，因为他无法看到简单的东西，比如边框/空白
it also has default padding --> 特别是边框，因为他已经删除了填充
谢谢！我的问题由此解决！你解决了我的头痛:)
好了各位，已经更新了，只是需要一点时间来写。