管理内联列表项之间的空白的最佳方法

StackOverflow https://stackoverflow.com/questions/241512

题

我的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;
}

然而，李的空白出现了。我可以通过折叠它们来删除空白：

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

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

有帮助吗？

解决方案

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

<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 */

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

其他提示

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

你真正想要的是CSS3 白空间崩溃：丢弃。但我不确定是否有任何浏览器实际支持该属性。

一些替代解决方案是让标签的尾部消耗空白。例如：

<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>

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

但CSS3属性可能是最佳理论方式。

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

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

在没有头痛的情况下具有完全相同的视觉效果。

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

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

然后将项目的显示属性设置为内联块而不是内联。

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

问题是UL中的字体大小。将其设置为0并且它将消失，但您不希望实际文本设置得如此之小，因此请将LI字体大小设置为您想要的大小。

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

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

而不是：

<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>

<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>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top