0

我知道我的问题的原因，但是我真的找不到解决方法 - 我的客户希望菜单与页面容器一样长 - 或尽可能接近（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;
}
4

2 回答 2

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 的字体大小，但我发现它不适合。所以你可能需要测试一下哪种字体大小最适合。

见小提琴

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

于 2013-08-25T18:22:45.787 回答
0 
<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>
于 2013-08-25T17:58:09.237 回答