导航栏项目中的空间很小 - 布局问题

Question

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

我已经很少成功地找出导致这种情况发生的原因，任何建议都将不胜感激。

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

也许这形象可以帮助显示问题：

Answer 1

在线& inline-block的元素在你的HTML的任何空白的影响。这导致每个清单项目之间的小差距。您可以对空间进行注释，也可以手动将其删除。您也可以float: left;每个<li>或由几个PX给出了否定的左缘

More info

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容器和浮动：留给李和锚。