Question

I’m attempting to create a horizontal navigation bar in CSS. I’m using the CSS from this page and it seems to be working fine:
http://css.maxdesign.com.au/listamatic/horizontal27.htm

…but if you hover over any of the links in the example, theres a small gap on the left side of each element just before the vertical white bar. I’m having the same problem with my nav bar. Is there a way to remove this space? Or is there a better way to create a centered horizontal nav bar?

Thank you!

Answer 1

<ul id="navlist">
   <li id="active"><a id="current" href="#">Item one</a></li><li><a href="#">Item two</a></li><li><a href="#">Item three</a></li><li><a href="#">Item four</a></li><li><a href="#">Item five</a></li>
</ul>

Remove all new lines between <li> elements. The new line in the code is interpreted as a space, that’s the problem, it’s not styling.

also you can add style:

#navcontainer ul li a {
  margin-left:-3px;
}