3个解决方案：

Question

<div id="menuNav">
    <ul id="menuNav-ul">
        <li><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
    </ul>
</div>

我有一个我在这里制作的JSFiddle：

http://jsfiddle.net/agzF5/

如果将鼠标悬停在不是第一种类型的菜单项上，您会注意到如果设置了边框后会出现一些奇怪的边距，我想知道如何删除它？

马特

Answer 1

添加

html, body{margin:0;}

到顶部，单独的身体应该也可以正常工作..

Answer 2

JSFiddle here

您的列表项目为display：inline-block;

我把它们漂浮在左边，添加了显示：块;并更改了包装元素的一些属性。所以它仍然包含浮动元素，见下文。

#menuNav-ul {
    background: lightgrey repeat-x;
    list-style-type: none;
    padding: 0;
    margin: 0;
    border-bottom: 2px solid darkgrey;
    display:block;
    overflow:hidden;
}

#menuNav-ul li {
    display: block;
    border-right: 1px solid #bfbfbf;    
    margin: 0px;
    padding: 0px;
    float:left;
}

Answer 3

您将LI元素设置为display:inline-block，这意味着它们之间会有内联空格空格（通常为~4px）。

3个解决方案：

<强> 1。 LIVE DEMO

将font-size:0;添加到UL
将LI元素的字体大小重置为px

2。不要添加display:inline-block;，float:left;您的LI元素

第3。（不推荐）向LI元素添加-4px margin-left

P.S：另外一个建议是不要为LI元素设置样式（颜色，边框等）。将它们视为风格化<a>元素的简单定位容器。

Answer 4

其他人已经提出了很好的解决方案。

我想把它留在这里以防万一它可以帮助别人。

原因是你的标记中有空格（完全没问题），内联块渲染为空格。

如果您正在使用内联块元素，您可以将父元素的字体大小设置为0，然后显式设置子元素的字体大小作为解决方法。

Answer 5

简单的解决方案是在你的li项目之间添加评论：

<div id="menuNav">
    <ul id="menuNav-ul">
        <li><a href="#">Home</a></li><!--
        --><li><a href="#">Page 1</a></li><!--
        --><li><a href="#">Page 2</a></li>
    </ul>
</div>

检查它的实际效果：http://jsfiddle.net/agzF5/7/

边界之间的间距，我无法删除它

5 个答案:

3个解决方案：