如何摆脱css水平列表项之间的空白？ [复制]答案

【问题标题】：How to get rid of white space between css horizontal list items? [duplicate]如何摆脱css水平列表项之间的空白？ [复制]
【发布时间】：2011-03-03 21:21:54
【问题描述】：

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

【问题讨论】：

标签： html css html-lists navigationbar

【解决方案1】：

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

另见my similar question。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

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

【解决方案3】：

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

【讨论】：

抱歉，没有完整阅读@David 的答案。
对我来说是更好的解决方案
浏览器支持怎么样？我在某处读到它在 IE 中不起作用
这对我来说是最好的解决方案....谢谢....float:left; 也可以工作...但是如果我想制作white-space:nowrap 但font-size:0; 它不起作用解决了我的问题。

【解决方案4】：

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

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

对不起。

【讨论】：