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都会发生奇怪的事情，如果我说实话，我并没有多少保护它。

然而，如果你确实想要调查一下，我会向你的新朋友打个招呼：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/

Answer 2

当您构建条形时，请使用css cos中的百分比，然后当您缩小时，它将是缩小页面的百分比

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

2 个答案: