Question

我有一个100％宽度的容器，我想填充8个相同大小的输入。 100/8 = 12.5

html：

<div id="container">
<input class="form" />
<input class="form" />
....
</div>

我的css：

#container{
  width: 100%;
  background-color:red;
  margin:0;
}

.form{
  width:12.5%;
  margin:0;
}

正如你在这个小提琴中看到的那样：https://jsfiddle.net/7z7e63cb/

最后一个输入显示在另一行中。 为什么呢？我该如何解决？ 谢谢

Answer 1

你需要做两件事

从HTML中删除空格
由于默认边框和填充

box-sizing: border-box

html,
body {
  margin: 0;
  padding: 0;
}
#container {
  width: 100%;
  background-color: red;
  margin: 0;
}
.form {
  width: 12.5%;
  box-sizing: border-box;
  margin: 0;
}

<div id="container">
  <input class="form" /><!--
  --><input class="form" /><!--
  --><input class="form" /><!--
  --><input class="form" /><!--
  --><input class="form" /><!--
  --><input class="form" /><!--
  --><input class="form" /><!--
  --><input class="form" />
</div>

Answer 2

在我看来，2016年最好的方法是使用Flexbox：见updated fiddle。

主要技巧是通过以下几行完成的：

#container{
  ...
  display: flex; /* turns the Flexbox magic on! */
}

.form{
  flex: 1; /* makes the elements equal width, no extra calculation needed */
  min-width: 0; /* allows them to shrink below their default width */
  ...
}

html,
body {
  margin: 0;
  padding: 0;
}
#container {
  width: 100%;
  background-color: red;
  margin: 0;
  display: flex; /* turns the Flexbox magic on! */
}
.form {
  flex: 1; /* makes the elements equal width, no extra calculation needed */
  min-width: 0; /* allows them to shrink below their default width */
}

<div id="container">
  <input class="form" />
  <input class="form" />
  <input class="form" />
  <input class="form" />
  <input class="form" />
  <input class="form" />
  <input class="form" />
  <input class="form" />
</div>

Answer 3

由于空格，它占用了几个div的长度，因此 '形成' 不符合一条线。
你也可以 *。将表单宽度减少到11.5%。或者，
*。删除空格。

Answer 4

内容宽度涉及的因素多于输入字段的宽度。

我已将<Route path="job/:id" component={JobDetailPage} />添加到border:0;类，并删除了html中输入之间的换行符。

这将导致您正在寻找的100％宽度，根据更新的小提琴：

https://jsfiddle.net/ghcuhwpo/

100％宽度的容器，8个相同尺寸的输入

4 个答案: