列表项的神秘间距[重复]

Posted 2023-03-06

【中文标题】列表项的神秘间距[重复]

【英文标题】：Mysterious spacing on list items [duplicate]

【发布时间】：2014-06-14 00:36:51

【问题描述】：

这是我的代码：http://jsfiddle.net/spadez/FbADY/11/

尽管我使用了这段代码：

 * 
    margin:0;
    padding:0;

项目之间似乎仍有空格。在谷歌浏览器开发者栏中，它说他们没有边距或填充来导致它。

【参考方案1】：

Demo Fiddle

这是因为 li 项目显示为内联，因此在您的代码中，当每个项目出现在新行上时，这将输出为空格。您可以通过更改 CSS 来避免这种情况：

ul 
    font-size:0;

这使得项目之间的“错误”空间的大小为零，例如不可见，因此不占用空间。内联元素被解释为与文本内容一样有效，因此在您的代码中用换行符等分隔它们时，这变成了一个空格。另一种解决方案是将项目向左浮动 (float:left) 或将所有 li 项目放在 html 的一行中。

注意。如果您使用上面的尺寸选项，您可能希望在您的 li 上重置 font-size（例如，16px 等）。

【讨论】：

这是一个绝妙的技巧。

【参考方案2】：

因为如果您使用的是display: inline-block，它还会包含li 之间的空格。

要么删除li 之间的空格，要么使用float: left 而不是display: inline-block。

见http://jsfiddle.net/sjroesink/FbADY/12/

【参考方案3】：

这是 display: inline-block 属性，它在前端直观地呈现源代码中的空白。

如果您想保留 inline-block 显示属性，您可以通过将所有元素串在一起来删除 HTML 中的空格，例如：

   <ul><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li></ul>

虽然不漂亮，但解决了问题。

您还可以考虑使用 display: table-cell 进行水平布局，或使用上面建议的浮动。