代码之家 › 专栏 › 技术社区 › Jason

水平菜单中的CSS-<li>项之间有间隙

menu css

Jason · 技术社区 · 15 年前

由于某些原因,锂元素的左右边界不接触,它们之间大约有4-5像素的间隙。 我不知道它是从哪里来的。。。我花了很多时间在萤火虫里瞎逛,运气不好。。。

加价

 <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/或w/o它)。我需要在IE7+上运行,而Firefox在IE8和FF上存在问题。

2 回复 | 直到 15 年前

Yi Jiang G-Man 11 年前

你在用 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;
}

而不是

satnhak 15 年前

从易江的解决方案来看:

<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