Question

我试图将5个输入放在一行上。很简单，我想。我有一个父div，左边和右边有一些边距。我把输入内部宽度为20％（5 x 20 = 100％）。但是最后的输入是没有理由的吗？有人知道为什么以及如何解决这个问题？

＆＃13;

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

＆＃13;

Answer 1

我建议使用 flexbox 。

＆＃13;

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

＆＃13;

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

＆＃13;

为什么你的例子不起作用是因为：

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

要使用原始方法修复它，您可以执行以下操作：

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

您还可以浮动输入框，以便空白区域不会被渲染。

＆＃13;

form:after { /* clear floats */
  content: "";
  display: table;
  clear: both;
}

input {
  float: left;
  width: 20%;
  box-sizing: border-box;
}

＆＃13;

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

＆＃13;

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

1 个答案: