html - 当我的页面放大或缩小时，如何修复我的子导航栏？

Question

我网站上的子导航栏有问题 当用户放大或缩小子导航栏中的元素时，调整并且最后一个元素转到不同的行。我该如何控制它？

我不希望子导航栏在用户放大或缩小时调整

请帮忙

下面是我的子导航栏代码

enter code here <div id="subnav" class="subnav-stores">
        <ul class="clearfix">

     <li style="font-size: 14px; padding-right:8px; text-align: center;"><a                        href="/stores/speedway" class="">Speedway</a></li>
<li style="font-size: 14px; padding-right:8px; text-align: center;"><a href="/stores/ina"           class="" >Ina</a></li>
<li style="font-size: 14px; padding-right:8px; text-align: center;"><a href="/stores/grant" class="">Grant</a></li>
<li style="font-size: 14px; padding-right:8px; text-align: center;"><a href="/stores/phoenix" class="">Phoenix</a></li>
<li style="font-size: 14px; padding-right:8px; text-align: center;"><a href="/stores/mesa" class="">Mesa</a></li>
<li style="font-size: 14px; padding-right:8px; text-align: center;"><a  href="/stores/flagstaff" class="">Flagstaff</a></li>
<li style="font-size: 14px; padding-right:0px; text-align: center;"><a href="/stores/bookmans-sports-exchange" class="">Sports Exchange</a></li>

现在我将向您展示用于设置 css 子导航栏样式的 css

      #subnav ul {
margin:1.6em 0;
list-style:none;
border:1px solid #d2cfc4;
border-radius: 6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
/*border-collapse: separate;*/ 
background-color: rgba(212, 209, 197, 0.3);
behavior:url(http://preview.drawbackwards.com/PIE.php);
position:relative;
z-index:0;
}
    #subnav li {float:left;
/*padding:8px;*/
border-right:1px solid #d2cfc4;
/*min-width:118px;*/
text-align:center;
font-size:14px;
padding:0 4px;
}
   .subnav-about li a {
    padding:4px 28px 5px 27px;
}
   .subnav-stores li a {
    padding:4px 33px 5px 33px;

Answer 1

当用户放大或缩小时，许多 CSS 会发生奇怪的事情，老实说，我并没有采取太多防范措施。

但是，如果您确实想研究它，我会向您最好的新 friend box-sizing: border-box 打个招呼。这说明了元素总宽度中的边框宽度。我还让你的 li 元素宽度百分比，所以它们随着页面移动而缩放，我去掉了 .subnav-stores li a

上的所有水平填充

 #subnav li {

     float:left;
     width:13%;
     border-right:1px solid #d2cfc4;
     text-align:center;
     font-size:14px;
     padding:4px 0;

     -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
             box-sizing: border-box;

 }

它正在运行:http://jsfiddle.net/pN24G/