Question

我只想创建一个包含divs的简单水平列表。因此我这样做了：

现在你可以在结果中看到div不是彼此相邻的。但我使用了50％的宽度。那有什么不对？

Answer 1

inline-block的元素在右侧有一点余量。您可以使用此代码查看此内容：

div {
  background:black;
  display:inline-block;
  width:20%;
}

<div>Test #1</div>
<div>Test #2</div>

要解决您的问题，您可以使用以下内容：

body, html {
  padding:0;
  margin:0;
}
.list{
  width:100%;
  height: 100%;
  background: black;
}
.list div{
  float:left;
  display: block;
  width: 50%;
  height: 100px;
  background: red
}

<div class="list">
  <div style="background: red">1</div>
  <div style="background: orange">2</div>
  <div style="background: yellow">3</div>
  <div style="background: lightyellow">4</div>
</div>

Answer 2

实际上，这是inline-block的问题所以如果你想使用它，你就不能在元素之间有空格;）

检查你的小提琴：https://jsfiddle.net/ks0t1xoy/13/

从您的.list中删除所有空格后，所有元素都很好地对齐，而不会触及您的CSS

显示50％的内联块不排队？

2 个答案: