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;而不是{{1 ，五个display: inline-block;元素符合预期（宽度相同）......

jsFiddle： Inline-Block vs. Float

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

我能找到的唯一一个类似于我的问题就是这个问题（这对我没有帮助）：css inline-block vs float

Answer 1

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

根据您的要求以及您希望获得的“hacky”有多种解决方案。你可以在这里看到它们：Ignore whitespace in HTML

就我个人display:table-cell而言，我个人使用li，因为它享有最佳的浏览器支持并且是最不熟练的方法

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。有些人用注释来隐藏空格，但我认为这是滥用评论语义而且在源代码中看起来仍然很难看。

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

1 个答案: