内联块级列表项之间的空格

Question

可能是重复问题:
inline-block 列表项中的不必要边距
如何从 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>

- Tyler Crompton

---

当你说“它们中间有空格”时，这是什么意思？空格字符在<li></li>标签之间吗？顺便说一下：你这里的HTML无效。你没有<ul></ul>或<ol></ol>。 - Shiv Kumar

哪里有空格？请添加一张截图或演示。 - JohnP

你是指每个元素之间的水平间距吗？如果是的话，你可以在menu#headerMenu li定义中重置margin和padding为0，并删除width 100px; - Simon H

是的，空格字符在<li>标签之间。关于<ul>和<ol>的事情，谢谢。我忘记了<menu>标签已经被弃用了。无论如何，这些空格仍然适用于<li>标签。 - Tyler Crompton

我更新了代码，去掉了所有不必要的部分，帮助您看清楚发生了什么。 - Tyler Crompton

在这里找到了解决方案，清楚地解释了如何删除它。http://www.ultimatewebtips.com/remove-space-between-li-with-display-inline-block/ - Joakim Ling

Answer 1

我以前见过这个问题并回答过它:

经过进一步的研究，我发现inline-block是一种受空白影响的方法，它依赖于字体设置。在这种情况下，4像素被呈现。

为了避免这种情况，您可以将所有的li放在一行中，或者像这样将结束标签和开始标签合并:

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

点击此处查看示例.

---

如其他答案和评论所述，解决这个问题的最佳实践是在父元素中添加font-size: 0;：

ul {
    font-size: 0;
}

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

这种写法有助于 HTML 的可读性（避免标签混在一起等情况）。间距效果是因为字体的间距设置，因此您必须重置它以适用于内联元素，并为其中的内容再次设置。

- Kyle

---

实际上这是由于单词间距造成的，因此4像素取决于字体设置。请参见http://jsfiddle.net/Cerebrl/Wt4hP/。 - thomaux

Kyle，请您更新您的回答，以便不会给人们提供错误信息。在inline-block元素中不会添加4px的边距。正如Anzeo所提到的，这是由于在元素之间呈现了一个空格。在CSS中，“margin”一词具有特定的含义，它可能会误导他人不理解问题的本质。 - David Bradbury

这是最佳的语义结果吗？将LI标签连在一起运行？ - itsricky

有没有更好的CSS方法来完成这个任务？ - itsricky

一个有趣的关于内联块元素之间空格的文章可以在这里找到。 - ira

Answer 2

解决方案：

ul {
    font-size: 0;
}

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

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

- David Horák

---

哦，我从未考虑过那个问题。讲得有道理。我没有点赞这个答案的唯一原因是我不能在列表内使用百分比或 em 作为字体大小的单位。我可以通过 JavaScript 解决这个问题，但并不理想。 - Tyler Crompton

很棒的解决方案，适用于我复杂的两级水平弹出菜单。 - joshas

该方法的缺点是无法使用 em 或 %。 - thomaux

这个技巧对Safari无效。 - YodasMyDad

与将所有的<li>标签放在一行/去除空格相比，这是一个更加优雅的解决方案，因为有时候人们可能无法每次都访问标记。 - Ricardo Zea

Answer 3

我会添加 CSS 属性 float:left，如下所示。这将消除多余的空间。

ul li {
    float:left;
}

- Trevor G

---

我知道我来晚了，但是这个解决方案虽然可以去除<li>之间的空格，但它也会引入另一个潜在的问题：你将无法使列表项居中或者右对齐。如果你试图在<li>上使用float:right;，它们的顺序将被交换，意味着：列表中的第一项将成为最后一项，第二项成为倒数第二项，以此类推。 - Ricardo Zea

Answer 4

实际上，这不仅适用于display:inline-block，也适用于display:inline。 因此，除了David Horák的解决方案外，这也可以起作用：

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

- Gerbus

---

但是你不能使用相对字体大小来解决这个问题。不过，是的，我自己也考虑过这个问题。 :) - Tyler Crompton

你可以始终使用 rem，并为旧版浏览器提供像素回退。我这样做了，它的效果非常好。 - Ricardo Zea

Answer 5

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

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

- Leo Pitt

---

感谢您提供的解决方案。将字体大小设置为零，即使仅针对UL，在某些地方使用em-sizing会导致我的布局出现问题。 - Andy Giesler

Answer 6

我遇到了同样的问题，在我的菜单中使用了inline-block后，每个“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”的结尾和下一个“li”的开头之间添加注释符号。 这样，水平空间就会消失。 希望这回答了您的问题。 谢谢。

- Fabien

Answer 7

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

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

• 兼容IE8+和主流浏览器
• 相对/固定字号独立
• HTML代码格式独立（无需粘合</li><li>）

- Maxime Pacary

Answer 8

只需在您的HTML代码中删除li之间的换行符... 将li放在一行中即可。

- Mya

---

我不是那些点踩的人之一，但是不想失礼，这个问题已经被回答了。 - Tyler Crompton

天啊，我已经撞了多少周的墙才解决 LI 符号和其后文本之间的换行问题。顺便说一句，这个换行问题只在非常大的缩放比例下才会出现。你是我的英雄！ - user420479