当页面为全尺寸时，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％，但在页面尺寸减小时的宽度减小

回答

相关问题