當頁面爲全尺寸時，div的寬度爲100％，但在頁面尺寸減小時的寬度減小

我有一個帶背景圖片的div，當頁面爲全尺寸時，它的寬度爲100％。就像這樣：當頁面爲全尺寸時，div的寬度爲100％，但在頁面尺寸減小時的寬度減小

enter image description here

當頁面的尺寸重新調整，寬度縮小。就像這樣：

enter image description here

我的HTML：

<section> 
    <div class="links"> 
    <div class="links_area"> 
     <ul id="menu"> 
     //html goes here  
     </ul> 
    </div> 
    </div> 
</section>

我的CSS：

div { 
display: block; 
} 
section { clear:both;display: block;} 
.links{background:url(../images/links_bg.gif) repeat-x; width:100%; height:37px;} 
.links_area{width:1003px; height:37px; margin:0 auto; } 
ul#menu { float: right; height:auto; margin: 0 0; width: 796px;} 
ul#menu li {display:inline;} 
ul#menu li a {display:block; float:left; background-position:0 0; color:#FFFFFF; text-decoration:none; font-family:Tahoma, Geneva, sans-serif; font-weight:bold; font-size:13px; padding:12px 10px 10px 4px; border-right:none;}

我想不通爲什麼會這樣。

來源

2013-03-09 Kanishka Panamaldeniya

後，你可以發佈的jsfiddle，所以我們可以用它玩？ – 2013-03-09 05:51:40

這條規則：

.links_area{width:1003px; height:37px; margin:0 auto; }

給該div固定的寬度，但因爲下一個規則浮#menu，

ul#menu { float: right; height:auto; margin: 0 0; width: 796px;}

股利不不包含它，所以它（#menu ）調整窗口大小時調整大小。嘗試將overflow:auto;添加到.links_area規則中。

來源

2013-03-09 05:55:01

您可以嘗試提供100%寬度.links_area而不是width:1003px。

試試這個：

.links_area{width:100%;}

來源

2013-03-09 05:56:34

你UL把一個DIV像 <div style="clear:both; float:none"></div>.

來源

2013-03-09 09:09:45

當頁面爲全尺寸時，div的寬度爲100％，但在頁面尺寸減小時的寬度減小

回答

相關問題