CSS

【问题标题】：CSS - <li> Items in Horizontal Menu have a Gap Between ThemCSS - <li> 水平菜单中的项目之间有间隙
【发布时间】：2026-02-12 20:30:01
【问题描述】：

问题

由于某种原因，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>

#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/或 w/o 它）。我需要让它在 IE 7+ 和 Firefox 中工作 - IE8 和 FF 中存在问题。

【问题讨论】：

标签： css menu

【解决方案1】：

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

 <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

【讨论】：

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

【解决方案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。

【讨论】：