logo标签列表

如何消除CSS水平列表项之间的空白？

htmlcsshtml-listsnavigationbar
26

我有以下的测试页面和CSS。当显示时，每个列表项之间会有4px的间隙。如何让这些项目彼此挨在一起？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">     

<html>
      <head>
        <link type="text/css" rel="stylesheet" href="/stylesheets/test.css" />
      </head>

      <body>
        <div>
          <ul class="nav">
            <li class="nav"><a class="nav" href="#">One1</a></li>
            <li class="nav"><a class="nav" href="#">Two</a></li>
            <li class="nav"><a class="nav" href="#">Three</a></li>
            <li class="nav"><a class="nav" href="#">Four</a></li>
          </ul>
        </div>
      </body>
    </html>

这是CSS代码：

ul.nav, ul li.nav {
  display: inline;
  margin: 0px;
  padding: 0px;
}

ul.nav {
  list-style-type: none;
}

li.nav {
  background-color: red;
}

a.nav {
  background-color: green;
  padding: 10px;
  margin: 0px;
}

a:hover.nav {
  background-color: gray;
}
4个回答
45
您需要在
  • 元素上使用display:block 和 float:left 来去除空格。当它们是行内元素时，浏览器会将它们视为单词，因此在它们之间留下空格。

    还可以查看我的类似问题。

    • 17

    将@Skilldrick和@teedyay结合起来，你就得到了回答和解释。
    如果将<li>视为单词，则其周围的任何空格都会被压缩为一个空格。

    所以我猜这是一项看起来像bug的功能。

    要删除空格，请将所有<li>链接在一起，并且它们之间没有空格。
    或者
    将<ul>的字体大小减小为0，并将<li>的大小恢复为原来的大小。

    1
    减小字体大小并恢复它对我起了作用，谢谢。 - manitu
    1
    我知道这个问题有点老了，但还有一种替代方案 - 在每个</li>后面放置<!--，在每个<li>前面放置-->。请注意，我并没有说这是一个好的解决方案！然而，与上述其他替代方案相比，它已成为我的首选方法。 - ClarkeyBoy
    float left 也可以使用，但对我来说带来了不良的副作用。字体大小为零就解决了问题。谢谢。 - nest
    12

    您还可以为<ul>标签设置font-size:0。

    抱歉，我没有完全阅读 @David 的答案。 - killebytes
    2
    对我来说这是更好的解决方案。 - wutzebaer
    浏览器支持怎么样？我在某个地方读到过，在IE <= 7中它不起作用。 - Asad Ullah
    这对我来说是最好的解决方案...谢谢...float:left; 也可以工作...但如果我想要使用 white-space:nowrap，它就无法工作。但是 font-size:0; 解决了我的问题。 - Syamsoul Azrien
    6

    很抱歉，这个也有点复杂，但如果有一个清晰易懂的解决办法，我会（愉快地）感到惊喜。

    将所有 <li> 放在同一行：

    <li class="nav"><a class="nav" href="#">One1</a></li><li class="nav"><a class="nav" href="#">Two</a></li><li class="nav"><a class="nav" href="#">Three</a></li><li class="nav"><a class="nav" href="#">Four</a></li>

    抱歉。
    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接