How to get rid of white space between css horizontal list items? [duplicate]
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?
<!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:
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;
}
You need to use display:block and float:left on the lis to remove the space. When they're inline the browser treats them as words, and so leaves space in between.
Also see my similar question.
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.
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
You can also set font-size:0 for the <ul> tag.
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 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.
加载中,请稍侯......
精彩评论