CSS - <li>水平菜单中的项目之间存在差距</li>

Question

问题

由于某些原因，li项目的左右边框没有触及，它们之间的差距大约为4-5 px。我不知道它来自哪里......我我花了很多时间在Firebug上逛逛，没有运气......

标记

 <div id="menucontainer">      
      <ul id="menu">              
           <li><a href="google.com"></a></li>
           <li><a href="google.com"></a></li>
           <li><a href="google.com"></a></li>
      </ul>
 </div>

CSS

#menucontainer
{
    display: block;
    float: left;
    width: 100%;
}

ul#menu
{
    display: block;
    padding: 5px 0px 5px 15px;
}

ul#menu li
{
    display: inline;
    padding: 3px;
    border-right: 1px solid #D8D6FF;
    border-left: 1px solid #D8D6FF;
    margin: 0 !important;
}

ul#menu li a
{
    padding: 3px;
    margin:0;
}

其他信息

我正在使用960网格系统CSS重置（这似乎没有改变我的问题w /或它没有）。我需要在IE 7+和Firefox中使用它 - 在IE8和FF中存在问题。

Answer 1

您正在使用display: inline。这意味着每个li元素之间的空格字符被尊重，并将折叠到一个空格中。如果需要，可以尝试使用float代替，或删除这些元素之间的所有空格。

 <ul id="menu">              
     <li><a href="http://example.com"></a>
     </li><li><a href="http://example.com"></a>
     </li><li><a href="http://example.com"></a></li>
 </ul>

会起作用，或者如果你倾向于使用花车，

#menu li {
    float: left;
}

而不是display: inline

Answer 2

从易江的解决方案中继续：

<div id="menucontainer">      
  <ul id="menu">              
       <li><a href="google.com"></a></li><!--
    --><li><a href="google.com"></a></li><!--
    --><li><a href="google.com"></a></li>
  </ul>
</div>

确保确实没有任何空格。向左浮动可能会导致翻转a:hover的菜单出现问题。