html - 如何使导航菜单保持原位

Question

在使用 UL(无序列表)构建导航菜单时，我注意到当我放大和缩小页面时，列表项向右移动，使它们脱节。 如何让他们一直呆在同一个地方？

我在 JSFiddle 添加了以下内容和它一起玩。

<div id="navigation">
                     <ul>
                            <font face="Verdana, Geneva, sans-serif">
                            <li > <a href="../index.html" > ANA SƏHIFƏ </a> </li>
                            <li> <a href="../Biography/BiographyAZ.html"> BIOQRAFIYA </a> </li>
                            <li id="active-li"> <a href="#"> XƏBƏRLƏR VƏ HADISƏLƏR </a></li>
                            <li><a> KİTABLAR </a></li>
                            <li> <a> VİDEOLAR </a> </li>
                            <li> <a id="last-item">FOTOLAR</a> </li>
                            </font>
                     </ul>
#navigation {
    width: 900px;
    margin: 0 auto 0px;
}

div#navigation ul li {
    font-size:9px;
    list-style:none;
    background-color:transparent;
    background-color:#FFF;
    float: left;
}
div#navigation ul li:hover {
    background-color:#9C1A35;
}
div#navigation ul li a {
    color:#333333;
    text-decoration:none;
    display: block;
    padding:10px 43px 20px;
}
#navigation ul li a:hover {
    color:#fff;
}
ul {
    padding:0;
}
#active-li {
    background:#9C1A35 !important;
}
#active-li a {
    color:#fff !important;
}
#last-item {
    padding: 10px 42px 20px 42px !important;
}
div#navigation ul li #active {
    background:#9C1A35 !important;
}
div#navigation ul li #active a {
    color:#fff;
}

Answer 1

大多数页面在过度缩放时会失去布局。当在浏览器中启用“仅缩放文本”选项时会发生这种情况。 这是我的建议:

• 减少padding-right和 padding-left的 <a>将元素设置为较低的值(43 像素对于您的菜单来说太多了)。
• 尝试给出 height , min-height和 max-height到你的元素，并设置overflow:hidden .这样，文本将保留在它的容器框中，不会用完。
• 使用相对值(百分比、em)而不是 px 来调整元素的大小。