内联块列表项之间的空格 [重复]答案

【问题标题】：A Space between Inline-Block List Items [duplicate]内联块列表项之间的空格 [重复]
【发布时间】：2011-07-12 12:12:06
【问题描述】：

可能重复：
Unwanted margin in inline-block list items
How to remove “Invisible space” from HTML

为什么 inline-block 列表项中有空格？无论我如何将列表项放入菜单，我总是会得到空格。

li {
  border: 1px solid black;
  display: inline-block;
  height: 25px;
  list-style-type: none;
  text-align: center;
  width: 50px;
}
ul {
  padding: 0;
}

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

【问题讨论】：

当你说空间“在其中”是什么意思。空格字符在
标签之间？仅供参考：您在此处拥有的 html 无效。您没有
或
。

【解决方案1】：

我以前看过这个并回答过：

further research 之后我有发现inline-block 是一个空白依赖方法和取决于字体设置。在这种情况下，渲染 4px。

为避免这种情况，您可以运行所有 lis 一起排成一行，或者阻塞结束标签和开始标签在一起像这样：

<ul>
        <li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li>
</ul>

Example here.

正如其他答案和 cmets 所提到的，解决此问题的最佳做法是将font-size: 0; 添加到父元素：

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

这对 HTML 的可读性更好（避免将标签一起运行等）。间距效果是因为字体的间距设置，所以你必须为内联元素重新设置它，并为里面的内容重新设置它。

【讨论】：

其实是因为字间距的原因，所以 4px 取决于字体设置。见jsfiddle.net/Cerebrl/Wt4hP
Kyle，您能否更新您的答案，以免向人们提供错误信息？ 4px 边距不会添加到 inline-block 元素。正如 Anzeo 提到的，这是由于元素之间呈现了空间。 “边距”一词在 CSS 中具有特定含义，它可能会误导其他人不了解问题的本质。
我知道已经有两年了，但现在好多了jsfiddle.net/t7dut/647 也许渲染引擎现在不同了。
如果您不想这样做，我发现省略 <li> 元素的结束标签也可以解决问题。它仍然被认为是格式良好的 HTML。
这是最好的语义结果，同时运行 LI 标签吗？

【解决方案2】：

我将添加左浮动的 CSS 属性，如下所示。这消除了多余的空间。

ul li {
    float:left;
}

【讨论】：

我知道我迟到了，但是这个解决方案，虽然它确实消除了 <li>s 之间的间距，但它引入了另一个潜在问题：你不能居中和右对齐列表项。如果您尝试在<li>s 上执行float:right;，那么它们的顺序将被交换，这意味着：列表中的第一项将是最后一项，第二项是最后一项，依此类推。

【解决方案3】：

解决方案：

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

您必须将父字体大小设置为 0

【讨论】：

嗯。我从来没想过那个。说得通。我不赞成这个答案的唯一原因是我不能使用百分比或 ems 作为列表中字体大小的 UOM。我可以用 JavaScript 解决这个问题，但这并不理想。
很好的解决方案，与我复杂的 2 级水平弹出菜单一起使用。
缩小到这个方法是你不能使用 em 或 %
这个技巧对 Safari 不起作用
这是一种比将所有<li>s 放在一行中/删除空白更优雅的解决方案，因为不一定每次都可以访问标记。

【解决方案4】：

其实这并不是针对display:inline-block，也适用于display:inline。因此，除了 David Horák 的解决方案之外，这也有效：

ul {
    font-size: 0;
}
ul li {
    font-size: 14px;
    display: inline;
}

【讨论】：

但是您不能在此解决方案中使用相对字体大小。但是，是的，我自己也想过这个问题。 :)
您始终可以使用rems，并为旧版浏览器提供以像素为单位的回退。我做到了，它就像一个魅力。

【解决方案5】：

只需删除 html 代码中 li 之间的断点... 让 li 只在一行中..

【讨论】：

我不是反对者之一，但不要失礼，这个问题已经得到解答。
天啊。多少周以来，我一直在为 LI 符号和后面的文字之间的换行符而苦恼。顺便说一句，这个换行符只发生在非常大的缩放中。你是我的英雄！

【解决方案6】：

另一种解决方案，类似于Gerbus' solution，但这也适用于相对字体大小。

ul {
    letter-spacing: -1em; /* Effectively collapses white-space */
}
ul li {
    display: inline;
    letter-spacing: normal; /* Reset letter-spacing to normal value */
}

【讨论】：

感谢您的解决方案。将 font-size 设置为零，即使只是为了 UL，也会导致我的布局出现问题，因为我在某些地方使用了 em-sizing。

【解决方案7】：

即使它不是基于inline-block，这个解决方案也值得考虑（允许从上层进行几乎相同的格式控制）。

ul {
  display: table;
}
ul li {
  display: table-cell;
}

IE8+ & major browsers compatible
相对/固定字体大小独立
HTML 代码格式独立（无需粘贴</li><li>）

【讨论】：

【解决方案8】：

我遇到了同样的问题，当我在菜单上使用内联块时，每个“li”之间都有空格我找到了一个简单的解决方案，我不记得我在哪里找到的，反正这就是我所做的.

<li><a href="index.html" title="home" class="active">Home</a></li><!---->
<li><a href="news.html" title="news">News</a></li><!---->
<li><a href="about.html" title="about">About Us</a></li><!---->
<li><a href="contact.html" title="contact">Contact Us</a></li>

您在 : "li" 的两端和开始之间添加一个注释符号然后水平空间消失。希望能回答这个问题谢谢

【讨论】：