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

时间:2013-03-14 15:18:51

标签: css

我喜欢在检查萤火虫中的<a class="nav_anchor">等导航项目时,以及当我将鼠标悬停在它们上面时,每个导航项目右侧都会有一个5像素间距的估计值。

我在导航中导致这种情况发生的原因方面没什么成功,任何建议都会非常感激。

以下是链接:http://www.the-session.co.uk/pros/

也许这张图片可以帮助显示问题:

enter image description here

2 个答案:

答案 0 :(得分:2)

Inline&amp;内联块元素受HTML中任何空格的影响。这导致每个列表项之间的小差距。您可以注释空格,也可以手动删除它。您也可以float: left;每个<li>或者给出一个负的左边距(px

More info

答案 1 :(得分:1)

这是修复后的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和锚点。