How to get rid of white space between css horizontal list items? [duplicate]

Answer 1

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.

Answer 2

You can also set font-size:0 for the <ul> tag.

Answer 3

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

Answer 4

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.