0

所以当用户放大或缩小子导航栏中的项目并且最后一个项目进入不同的行时，我的网站上的子导航栏出现问题。我该如何控制？

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

请帮忙

在下面你可以找到我的子导航栏的代码

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;
4

2 回答 2

0

当用户放大或缩小时，许多 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/

于 2013-06-17T19:48:00.437 回答
0

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

于 2013-06-17T19:48:42.773 回答