无序列表列表项换行出现空白的怪异问题咨询

这是浏览器对HTML空白字符的默认解析规则导致的，和无序列表的核心概念无关，本质是行内/行内块元素的空白处理问题：

• 当你将<li>标签换行书写时，标签之间的换行、空格、制表符等空白字符，会被浏览器解析成一个单独的空格文本节点（就是你在Firefox Inspector里看到的空白元素）。如果你的导航项<li>设置了display: inline或display: inline-block（这是导航栏的常见布局写法），这个空格就会像普通文本空格一样显示在列表项之间，形成视觉上的空白间隙。
• 把所有<li>写在同一行时，标签之间没有多余的空白字符，浏览器不会生成空格文本节点，所以渲染出来就没有空白。

额外的解决思路（除了挤在同一行） #

如果不想牺牲代码可读性，还可以用这些方法：

• 给父元素<ul>设置font-size: 0，再给<li>重新设置正常的font-size，让空格文本节点的尺寸变为0，不会显示。
• 给<ul>设置负值的letter-spacing（比如letter-spacing: -0.31em）抵消空格宽度，再给<li>重置letter-spacing: normal。
• 使用Flexbox布局：给<ul>加display: flex，Flex布局默认会忽略子元素间的空白字符，这也是现在导航栏布局的更优方案。

内容的提问来源于stack exchange，提问作者p0lAris