Html 如何摆脱css水平列表项之间的空白？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3043707/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get rid of white space between css horizontal list items?
提问by Curyous
I've got the following test page and css. When displayed, there is a 4px gap between each list item. How do I get the items to be next to each other?
我有以下测试页面和 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>
The css:
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;
}
回答by Skilldrick
You need to use display:blockand float:lefton the lis to remove the space. When they're inline the browser treats them as words, and so leaves space in between.
您需要在s上使用display:block和来删除空格。当它们内联时，浏览器将它们视为单词，因此在它们之间留有空格。float:leftli
Also see my similar question.
另请参阅我的类似问题。
回答by David Perlman
Combine @Skilldrick and @teedyay and you have your answer and explanation.
If <li>s are treated as words than any white space around them is condensed to one space.
结合@Skilldrick 和@teedyay，你就有了答案和解释。
如果<li>s 被视为单词，那么它们周围的任何空格都会被压缩为一个空格。
So I guess this is a feature that looks like a bug.
所以我想这是一个看起来像一个错误的功能。
To remove the space either put all your <li>s in a chain with no white space between them.
OR
Reduce the font size on the <ul>to 0 and restore the size on the <li>s
要删除空格，请将所有<li>s 放在链中，它们之间没有空格。
或
将s上的字体大小减小<ul>到 0 并恢复<li>s上的大小
回答by killebytes
You can also set font-size:0for the <ul>tag.
您也可以font-size:0为<ul>标签设置。
回答by teedyay
I'm afraid this is dirty too, but I'll be (pleasantly) surprised if there's a clean fix to this.
恐怕这也很脏，但如果有一个干净的解决方案，我会（愉快地）感到惊讶。
Put all your <li>s on one line:
把你所有的<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>
Sorry.
对不起。
