如何摆脱之间的空白css水平列出的项目？[重复]

StackOverflow https://stackoverflow.com/questions/3043707

题

这个问题已经有一个答案在这里：

我已经得到了以下测试页和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;
}
有帮助吗？

解决方案

你需要用到的 display:block 和 float:left 在 lis删除的空间。当他们联浏览器将它们视为词，因此留下了空间。

也见 我类似的问题.

其他提示

结合@Skilldrick和@teedyay和你有你的回答和解释。
如果 <li>s是处理作为的话比任何空白他们周围的冷凝到一个空间。

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

去除空间的把你所有的 <li>s链中没有空白。
或
减少的字体大小的 <ul> 0和恢复的尺寸上 <li>s

你还可以设置 font-size:0 的 <ul> 标记。

我恐怕这是肮脏的过，但我将(惊喜)感到惊讶，如果有一个干净的解决这个。

把所有你的 <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>

对不起。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top