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

4 回答 4

45

您需要在s 上使用display:blockand来删除空间。当它们内联时，浏览器将它们视为单词，因此在它们之间留出空间。float:leftli

另请参阅我的类似问题。

于 2010-06-15T08:48:14.503 回答
17

结合@Skilldrick 和@teedyay，你就有了答案和解释。
如果<li>将 s 视为单词，则它们周围的任何空白都将压缩为一个空格。

所以我想这是一个看起来像错误的功能。

要删除空格，请将所有<li>s 放在一个链中，它们之间没有空格。
或将 s
上的字体大小减小<ul>到 0 并恢复<li>s上的大小

于 2010-06-15T11:01:17.970 回答
12

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

于 2011-11-08T08:56:11.450 回答
6

恐怕这也很脏，但是如果有一个干净的解决方法，我会（令人愉快地）感到惊讶。

把你所有的<li>s 放在一行上：

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

对不起。

于 2010-06-15T09:07:52.797 回答