Menu
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;
}
246
You need to use display:block and float:left on the li s to remove the space. When they're inline the browser treats them as words, and so leaves space in between.
We can also remove white space by setting parent element font-size to 0 and child elements font-size to 17px .
This is caused by the fact your browser will render the DIV's inline and as with words, they are separated by spaces. The width of the space is determined by the font-size, hence an easy trick is to set the font-size of your containing element to 0 and then reset the font-size in your inline divs.
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.
159
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
25
You can also set font-size:0 for the <ul> tag.
12
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.
6
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
