内联块与浮动 - 不同宽度？

Question

HTML

<ul>
  <li><a href="#">Item #1</a></li>
  <li><a href="#">Item #2</a></li>
  <li><a href="#">Item #3</a></li>
  <li><a href="#">Item #4</a></li>
  <li><a href="#">Item #5</a></li>
</ul>

CSS

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  display: inline-block;
  width: 20%;
}

我的问题

当我使用display: inline-block;我的<li>元素时,它们表现得比我使用时更宽float: left;.我将它们的宽度设置为20%(100%/ 5),但是最后一个<li>被强制到下一行,好像它太宽...当我使用float: left;而不是时display: inline-block;,五个<li>元素符合预期(具有相同的宽度) ...

jsFiddle: Inline-Block vs. Float

我想使用内联块,因为我不需要使用clearfix来使父<ul>扩展到<li>元素的高度...我可能决定使用float如果我能找到正确的方法来使用clearfix在这种情况下...无论如何,我仍然想知道为什么内联块宽度太宽......这些<li>元素应该在一条线上适合五个宽,只要宽度为20%并且内部的内容不是太宽了......

我能找到的唯一一个类似于我的问题是这个(这对我没用):css inline-block vs float

Answer 1

这很简单.如果您background: red在li规则中添加一个规则,您会看到每个规则之间存在小差距li.间隙不是边距或填充,而是在浏览器"折叠"换行符和制表符时创建的空白字符(空格).这里的问题是你的内联元素尊重空格,但浮动元素却没有.

有几种解决方案可以根据您的要求以及您想要获得的"hacky".你可以在这里看到它们:忽略HTML中的空格

就个人而言,我会使用它display:table-cell,li因为它享有最好的浏览器支持,并且是最少的hacky方法

ul.table {display:table; width:100%}
ul.table > li {display: table-cell; padding: 0; margin:0;}

同样有效(但不太可读)的解决方案是从源中删除空格,如下所示:

<ul><li><a href="#">Item #1</a></li><li><a href="#">Item #2</a></li></ul>

这适用于任何浏览器,甚至IE4.有些人用注释来隐藏空白,但我认为这是对注释语义的滥用,无论如何在源代码中仍然看起来很难看.