管理内联列表项之间空格的最佳方法答案

【问题标题】：Best way to manage whitespace between inline list items管理内联列表项之间空格的最佳方法
【发布时间】：2021-01-22 21:08:12
【问题描述】：

我的 HTML 如下：

<ul id="nav">
    <li><a href="./">Home</a></li>
    <li><a href="/About">About</a></li>
    <li><a href="/Contact">Contact</a></li>
</ul>

还有我的 CSS：

#nav {
    display: inline;
}

但是 li 之间的空格出现了。我可以像这样折叠它们来删除空格：

<ul id="nav">
    <li><a href="./">Home</a></li><li><a href="/About">About</a></li><li><a href="/Contact">Contact</a></li>
</ul>

但这主要是手动维护的，我想知道是否有更清洁的方法。

【问题讨论】：

标签： html css html-lists navigation-style

【解决方案1】：

这里有几个选项，首先我给你我在创建内联列表时的常规做法：

<ul id="navigation">
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
</ul>

然后是 CSS 使其按您的意愿运行：

#navigation li 
  {
    display: inline;
    list-style: none;
  }
#navigation li a, #navigation li a:link, #navigation li a:visited
  {
    display: block;
    padding: 2px 5px 2px 5px;
    float: left;
    margin: 0 5px 0 0;
  }

显然我省略了悬停和活动集，但这创造了一个很好的块级导航，并且是一种非常常用的方法，同时仍然符合标准。 /* 记得根据自己的喜好进行调整，为背景添加颜色等等 */

如果你想只保留文本和内联，我相信你想添加没有块元素：

   margin: 0 5px 0 0; /* that's, top 0, right 5px, bottom 0, left 0 */

意识到您想删除空白，只需相应地调整边距/填充。

【讨论】：

自己没有足够的代表来编辑它，但是你的 CSS 中的“#navigation ul li”应该被替换为“#navigation li”。
float: left; 拯救了这一天！那么这个幻影空白的原因是什么？有人知道吗？
换行符呈现为空格。

【解决方案2】：

另一种消除空格的有用方法是将列表的font-size 属性设置为0，并将列表元素的属性设置回所需的大小。

【讨论】：

如果您需要将内联块列表居中（即浮动不是一个真正的选项），这太棒了。谢谢
此方法在 Android 浏览器上似乎存在问题 - 研究：codepen.io/stowball/details/LsICH

【解决方案3】：

您真正想要的是 CSS3 white-space-collapse: discard。但我不确定是否有浏览器真正支持该属性。

另一种解决方案是让标签的尾部消耗空格。例如：

<ul id="nav"
    ><li><a href="./">Home</a></li
    ><li><a href="/About">About</a></li
    ><li><a href="/Contact">Contact</a></li
></ul>

我见过的另一件事是使用 HTML cmets 来消耗空格

<ul id="nav"><!--
    --><li><a href="./">Home</a></li><!--
    --><li><a href="/About">About</a></li><!--
    --><li><a href="/Contact">Contact</a></li><!--
--></ul>

如果您可以使用浮点数，请参阅 thismat 的解决方案，并且根据要求，您可能需要添加设置为 clear: both; 的尾随 <li>。

但 CSS3 属性可能是最好的理论上的方法。

【讨论】：

这真的很粗鲁而且没必要。
谢谢你，我需要避免向左浮动，这让我可以这样做。

【解决方案4】：

列表项的更好解决方案是使用：

#nav li{float:left; width:auto;}

完全一样的视觉效果，不让人头疼。

【讨论】：

【解决方案5】：

采用非基于 XML 的 HTML 并省略 </li>。

<ul id="nav">
    <li><a href="./">Home</a>
    <li><a href="/About">About</a>
    <li><a href="/Contact">Contact</a>
</ul>

然后将项目的显示属性设置为inline-block而不是inline。

#nav li {
    display: inline-block;
    /display: inline; /* for IE 6 and IE 7 */
    /zoom: 1; /* for IE 6 and IE 7 */
}

【讨论】：

【解决方案6】：

问题在于 UL 中的字体大小。将其设置为 0 会消失，但您不希望将实际文本设置得如此之小，因此请将您的 LI 字体大小设置为您想要的任何值。

<ul style="font-size:0px;">
<li style="font-size:12px;">
</ul>

【讨论】：

【解决方案7】：

我遇到了同样的问题，以上解决方案都无法解决。但我发现这对我有用：

而不是这个：

<ul id="nav">
   <li><a href="./">Home</a></li>
   <li><a href="/About">About</a></li>
   <li><a href="/Contact">Contact</a></li>
</ul>

像这样构建你的 html 代码（链接文本前后的空格）：

<ul id="nav">
   <li><a href="./"> Home </a></li>
   <li><a href="/About"> About </a></li>
   <li><a href="/Contact"> Contact </a></li>
</ul>

【讨论】：

为什么投反对票？它工作得很好，在我看来这是最不痛苦的黑客攻击。
经过数小时搜索非常简单的解决方案。谢谢@micha

【解决方案8】：

<html>
<head>
<style>
ul li, ul li:before,ul li:after{display:inline;  content:' '; }
</style>
</head>
<body>
<ul><li>one</li><li>two</li><li>three</li></ul>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
</body>
</html>

【讨论】：