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

我有以下测试页和CSS。显示时，每个列表项目之间有4px的间隔。我怎样才能让物品相邻？如何摆脱CSS水平列表项目之间的空白？

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

来源

2010-06-15 Curyous

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

另请参阅my similar question。

来源

2010-06-15 08:48:14 Skilldrick

恐怕这也太脏了，但是如果有一个干净的解决方法，我会（惊喜地）感到惊讶。

把你所有的<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-15 09:07:52 teedyay

结合@Skilldrick和@teedyay，你有你的答案和解释。
如果<li> s被视为词，那么它们周围的任何空白空间都会被浓缩为一个空格。

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

要删除空间，请将所有<li> s放入链条中，并在它们之间没有空白处。
OR
减少对<ul>字体大小为0，并在<li>小号

来源

2010-06-15 11:01:17

减小字体大小并恢复它为我做了窍门，谢谢 – kitschmaster 2012-01-28 16:46:18

我知道这个问题有点老了，但还有一个替代方案 - 在每个''和' - >后放置'<！ - ' '在每个'

'之前。请注意，我没有说这是一个很好的解决方案！然而，与上述替代方法相比，它已成为我的首选方法。 – ClarkeyBoy 2013-06-16 19:58:40

向左浮动也有效，但对我来说有不良副作用。字体大小为零的技巧。谢谢 – nest 2014-11-19 08:13:50

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

来源

2011-11-08 08:56:11 killebytes

抱歉，没有完全阅读@David的答案。 – killebytes 2011-11-08 08:57:35

对我来说是更好的解决方案 – wutzebaer 2013-09-30 10:51:13

浏览器支持情况如何？我已经在某处读过，它在IE <= 7时不起作用 – 2014-05-12 03:24:26

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

回答

相关问题