CSS-<；李>；水平菜单中的项目之间有间隙 问题

由于某些原因，li项目的左右边界不接触，它们之间大约有4-5像素的间隔。我不知道它来自哪里。。。我花了很长时间在Firebug里胡闹，运气不好

加价 其他信息

---

我正在使用960网格系统CSS重置（这似乎并没有改变我的问题，也没有改变它）。我需要在IE7+和Firefox中实现这一点-IE8和FF中存在问题。

您使用的是

display:inline

。这意味着这些

li

元素之间的空白字符将得到尊重，并将被压缩到单个空格中。如果需要，可以尝试改用

float

s，或者删除这些元素之间的所有空白

 <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>

---

而不是

display:inline

来继承易江的解决方案：

<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

有趣的…空白。它修复了它。谢谢我刚刚删除了

中的所有空格，然后按Ctrl+K+D（VisualStudio），这样它的格式就可以正常工作了！

 <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;
}

<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>