5

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 因为我不需要使用 clearfix 来使父级<ul>扩展到<li>元素的高度......如果我能找到使用的正确方法，我可能会决定使用 float clearfix 在这种情况下......无论如何，我仍然想知道为什么 inline-block 宽度太宽......<li>只要宽度为 20% 并且里面的内容不是，这些元素应该在一行上适合五个宽度太宽了……

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

4

1 回答 1

9

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

根据您的要求以及您想要获得的“hacky”程度，有几种解决方案。你可以在这里看到它们：忽略 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。有些人用评论来隐藏空格，但我认为这是对评论语义的滥用，而且在源代码中仍然看起来很丑。

于 2013-10-22T23:53:11.157 回答