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

Question

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

Cur*_*ous 25 html css html-lists navigationbar

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ski*_*ick 44

您需要使用display:block,并float:left在lis到删除的空间.当它们内联时,浏览器将它们视为单词,因此在它们之间留下空间.

另见我的类似问题.

Answer 2

Dav*_*man 17

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

所以我想这是一个看起来像一个bug的功能.

要删除空间要么将所有<li>s放在链中,它们之间没有空白区域.
或者
将字体大小减小<ul>到0并恢复<li>s 上的大小

Answer 3

kil*_*tes 12

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

对我来说是更好的解决方案 (2认同)

Answer 4

tee*_*yay 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>

Run Code Online (Sandbox Code Playgroud)

抱歉.

归档时间：	15 年，2 月前
查看次数：	31001 次
最近记录：	8 年，6 月前