当页面为完整大小时，div的宽度为100％，但页面大小减小时宽度会减小

Question

我有一个带背景图片的div，当页面为全尺寸时，它的宽度为100％。像这样：

重新调整页面大小时，宽度会减小。像这样：

我的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;}

我无法弄清楚为什么会这样。

Answer 1

这条规则：

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

给该div一个固定的宽度，但由于下一个规则浮动#menu，

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

div 不包含它，因此它（#menu）会在窗口调整大小时调整大小。尝试将overflow:auto;添加到.links_area规则。

Answer 2

你的UL之后放了一个div喜欢 <div style="clear:both; float:none"></div>.

Answer 3

您可以尝试在100%而不是.links_area中提供width:1003px宽度。

试试这个：

.links_area{width:100%;}