34

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

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

4

8 回答 8

30

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

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

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

于 2008-10-27T21:58:17.963 回答
27

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

于 2010-09-01T10:57:53.540 回答
16

你真正想要的是 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 注释来消耗空格

<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 属性可能是最好的理论方法。

于 2010-06-29T18:05:28.060 回答
9

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

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

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

于 2011-08-05T14:55:21.640 回答
6

采用非基于 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 */
}
于 2011-01-31T09:29:58.400 回答
4

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

<ul style="font-size:0px;">
<li style="font-size:12px;">
</ul>
于 2013-06-04T02:00:26.823 回答
1

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

而不是这个：

<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>
于 2014-10-10T20:16:20.460 回答
0 
<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>
于 2013-01-30T06:41:26.973 回答