显示 50% 的行内块不对齐？

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的问题，所以如果你想使用它，元素之间不能有空格;)

检查你的fiddle：https://jsfiddle.net/ks0t1xoy/13/

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

显示 50% 的行内块不对齐？

display inline-block with 50% doesn't line up?

html

css

inline