如何在父 div 的一行中放置多个输入？

Question

我正在尝试将 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>

Answer 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> 是内联级别，它还具有从浏览器默认样式表设置的默认填充和边框。
输入框之间也有白色space，也会被渲染

要用你原来的方法修复它，你可以这样做：

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>

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

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>

如何在父 div 的一行中放置多个输入？

How to fit a number of inputs on one line in parent div?

html

css

margin

padding