如何摆脱css水平列表项之间的空白？ [复制]
Posted
技术标签:
【中文标题】如何摆脱css水平列表项之间的空白？ [复制]【英文标题】：How to get rid of white space between css horizontal list items? [duplicate] 【发布时间】：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;
【问题讨论】：
【参考方案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>
对不起。
【讨论】：
以上是关于如何摆脱css水平列表项之间的空白？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
如何摆脱 Chrome/Safari 上的文本框选择突出显示？ [复制]