1

背景画像付きの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;}

なぜこれが起こっているのか理解できません。

4

3 に答える 3

3

このルール:

.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

于 2013-03-09T05:55:01.917 に答える
2

あなたのULが1つのdivを好きにした後 <div style="clear:both; float:none"></div>.

于 2013-03-09T09:09:45.707 に答える
0

の代わりに100%幅を提供することができます。.links_areawidth:1003px

これを試して ：

.links_area{width:100%;}
于 2013-03-09T05:56:34.330 に答える