css - 导航栏项目中的少量空间 - 布局问题

Question

我喜欢在检查我的导航项（例如<a class="nav_anchor">在 firebug 中）以及当我将鼠标悬停在它们上方时，每个导航项的右侧估计有 5 个像素的间距。

我在找出导致导航中发生这种情况的原因方面收效甚微，任何建议都将不胜感激。

这是链接：http ://www.the-session.co.uk/pros/

也许这张图片可以帮助说明问题：

Answer 1

内联和内联块元素会受到 HTML 中任何空白的影响。这导致每个列表项之间的差距很小。您可以将空格注释掉，也可以手动删除它。你也可以float: left;每一个<li>或给一个负的左边距几个 px

更多信息

Answer 2

这是修复后的 CSS

#main_menu {
    padding: 7px 10px 7px 20px;
    background-color: #6bb8c7;
    background-image: -moz-linear-gradient(top, #6bb8c7, #6cadde);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6bb8c7), to(#6cadde));
    background-image: -webkit-linear-gradient(top, #6bb8c7, #6cadde);
    background-image: -o-linear-gradient(top, #6bb8c7, #6cadde);
    background-image: linear-gradient(to bottom, #6bb8c7, #6cadde);
    height: 50px;
}
.menu_item, .menu_item_first {
    display:inline;
    border-right: 1px solid #000000;
    margin: 0;
    float: left;
}
a.nav_anchor {
    padding: 7px 17px;
    text-decoration: none;
    color:black;
    float: left;
}

只需将高度添加到菜单 div 容器和 float:left 到 li 和锚点。