CSS - <li>水平菜单中的项目之间有间隙 [英] CSS - &lt;li&gt; Items in Horizontal Menu have a Gap Between Them

问题描述

问题

由于某种原因，li 项的左右边框没有接触，它们之间大约有 4-5 像素的间隙. 我不知道它来自哪里......我我花了很多时间在 Firebug 上胡闹，但没有运气...

标记

 
<ul id="菜单"><li><a href="google.com"></a></li><li><a href="google.com"></a></li><li><a href="google.com"></a></li>

CSS

#menucontainer{显示:块；向左飘浮;宽度:100%；}ul#菜单{显示:块；填充:5px 0px 5px 15px；}ul#menu li{显示:内联；填充:3px；右边框:1px 实心 #D8D6FF；左边框:1px 实心 #D8D6FF；边距:0 ！重要；}ul#menu li a{填充:3px；保证金:0;}

其他信息

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

解决方案

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

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

会起作用，或者如果您倾向于使用浮动，

#menu li {向左飘浮;}

代替display: inline

The Issue

For some reason the left and right borders of the li items do not touch there is about a 4-5 px gap between them. I have no clue where it is coming from... I've spend a good amount of time monkeying around in Firebug with no luck...

The Markup

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

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

Other Info

I am using the 960 grid system CSS reset (which doesn't seem to change my issue w/ or w/o it). I need to get this working in IE 7+ and Firefox - Issue exists in IE8 and FF.

解决方案

You're using display: inline. That means that whitespace characters between each of those li elements are respected, and will be collapsed into a single space. If you need to, you can try using floats instead, or remove all whitespace between those elements.

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

would work, or if you're inclined to using floats,

#menu li {
    float: left;
}

instead of display: inline

这篇关于CSS - <li>水平菜单中的项目之间有间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！