css - 水平导航栏间距

Question

我试图在 CSS 中创建一个水平导航栏。我正在使用此页面中的 CSS，它似乎工作正常: http://css.maxdesign.com.au/listamatic/horizontal27.htm

...但是如果您将鼠标悬停在示例中的任何链接上，每个元素的左侧在垂直白条之前会有一个小间隙。我的导航栏也有同样的问题。有没有办法删除这个空间？或者是否有更好的方法来创建居中的水平导航栏？

谢谢!

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>

删除 <li> 之间的所有新行元素。代码中的新行被解释为空格，这就是问题所在，不是样式问题。

还可以添加样式:

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