菜单项未正确显示

Question

我知道我的问题的原因，但我无法找到解决问题的方法 - 我的客户希望菜单与页面容器一样长或尽可能接近（960px） - 不管怎样这可能如果我放大或缩小页面，就会发生这种情况。我无法真正找到解决方案（除了使菜单足够小以适应容器。 -

HTML：

<div id="page_menu" style=" margin-left:auto;margin-right:auto; width: 960px">
            <a href='/index.html'> Home </a>
            <a href='/stii.html'> Stii ce sa intrebi? </a>
            <a href='/diferit/html'> Ce e DIFERIT? </a>
            <a href='/oferta.html'> Oferta </a>
            <a href='/cumparare.html'> Cum cumpar? </a>
            <a href='/livrare.html'> Livrare </a>
            <a href='/noutati.html'> Noutati </a>
            <a href='/despre.html'> Despre noi </a>
            <a href='/contact.html'> Contact </a>
            <a href='/parteneri.html'> Parteneri </a>
        </div>

CSS：

#page_menu a {
    float: left;
    text-transform:none;
    color:#F1EFED;
    font-size:20px;
    padding:10px 15px 10px 14px;
    background-color: #84c225;
    text-decoration: none;
    border-right: 1px solid #ffffff;
}

Answer 1

鉴于你的HTML，这种风格会做你想要的：

#page_menu {
    display:table;
    width:960px;
    text-transform:none;
    background-color: #84c225;
    border:none;
    margin:0 auto;
}
#page_menu a {
    display:table-cell;
    padding:10px 5px;
    border-right: 1px solid #ffffff;
    text-align:center;
    text-decoration:none;
    font:16px 'Arial', sans-serif;
    color:#F1EFED;
}

你最初的字体大小为20px，但我发现它不合适。所以你可能需要测试一下哪种字体最适合。

请参阅Fiddle

顺便说一下，我现在无法在很多浏览器上进行测试，但我不确定它们是否都能很好地处理display:table-cell元素上的a。您可能希望安全地播放它并将每个a元素放在div中，并为这些div提供表格单元格样式。

Answer 2

<style>
#page_menu a {
float: left;
text-transform:none;
color:#F1EFED;
font-size:20px;
height:40px;
line-height:40px;
padding:0px 7px;
text-align:center;    
text-decoration: none;
border-right: 1px solid #ffffff;
}
.page_menu a:last-child
{
border:none;
}
</style>
<div id="page_menu" style=" margin-left:auto;margin-right:auto; width: 960px; background-color: #84c225;height:40px">
<a href='/index.html'> Home </a>
<a href='/stii.html'> Stii ce sa intrebi? </a>
<a href='/diferit/html'> Ce e DIFERIT? </a>
<a href='/oferta.html'> Oferta </a>
<a href='/cumparare.html'> Cum cumpar? </a>
<a href='/livrare.html'> Livrare </a>
<a href='/noutati.html'> Noutati </a>
<a href='/despre.html'> Despre noi </a>
<a href='/contact.html'> Contact </a>
<a href='/parteneri.html'> Parteneri </a>
</div>