Question

我有以下测试页面和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;
}

Answer 1

您需要在display:block上使用float:left和li来删除空格。当它们内联时，浏览器将它们视为单词，因此在它们之间留下空间。

另见my similar question。

Answer 2

结合@Skilldrick和@teedyay，你有答案和解释如果<li>被视为单词，则它们周围的任何空白区域会被压缩到一个空格。

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

要移除空格，请将所有<li>放在一个链条中，并且它们之间没有空白区域 OR
将<ul>上的字体大小减小为0并恢复<li>上的大小

Answer 3

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

Answer 4

我担心这也很脏，但如果对此有一个干净的解决方案，我会（愉快地）感到惊讶。

将所有<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>

对不起。

如何摆脱CSS水平列表项之间的空白？

4 个答案: