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

StackOverflow https://stackoverflow.com/questions/3043707

Question

This question already has an answer here:

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;
}
Was it helpful?

Solution

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.

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top