html - 当页面为全尺寸时，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%width in.links_area而不是width:1003px.

尝试这个 ：

.links_area{width:100%;}