0

重複の可能性：
インラインブロックを使用せずに、可変幅のdiv「IE7以上」を水平方向に中央揃えできますか？

画面の全幅にまたがる背景画像を持ち、メニューの内容が中央で980ピクセルに制限され、メニューの内容がその中央に配置されたメニューを作成しようとしています。

このように：http：//d.pr/i/eYcV

ただし、メニュー項目が将来増える可能性があるため、980pxを超えて領域を制限したくありません。

私はHTMLで次の構造を持っています：

<div class="menu">
  <nav class="primary_menu">
      <ul id="menu-primary">
           <li><a href="http://localhost:8888/maldonfire/">Home</a></li>
           <li><a href="http://localhost:8888/maldonfire/blog/">Blog</a></li>
      </ul>
  </nav>        
</div>

次のCSSを使用します。

/* Menu */
.menu{
background: url("images/menu_bg_home.jpg") repeat-x;
height: 70px;
}
.primary_menu{
display: block;
margin: 0px auto;
width: 980px;
height: 70px;
}
.primary_menu ul{
text-align: center;
list-style-type: none;
}
.primary_menu ul li{
float: left;
}

ありがとう

4

4 に答える 4

1

.primary_menu li を float: left から display: inline-block に変更すると、メニュー項目が中央揃えになります

于 2012-10-10T10:38:32.520 に答える
1

あなたが求めているものを達成する方法はたくさんあります...最も簡単なのは、inline-blocksこのように使用することです

.primary_menu ul{
    text-align: center;
}
.primary_menu ul li{
    /*float: left;*/
    display:inline-block;
    margin: 0 20px;
    *display : inline; /* for IE7 and below */
    zoom:1;
}

ここで私の答えを確認してください:インラインブロックを使用せずに、可変幅の「IE7以降」のdivを水平方向に中央に配置できますか?

于 2012-10-10T10:31:55.513 に答える
0

このデモ またはこのデモ2を試してください

.menu{
background:#ccc;
  padding:10px;
}
.primary_menu{
  background:#999;
display: block;
margin: 0px auto;
width: 980px;
height: 70px;

}
.primary_menu ul{
text-align: center;
list-style-type: none;
 margin:0px;
  overflow:auto;


}
.primary_menu ul li{
float: left;
line-height:4;
padding:5px;  
}
于 2012-10-10T10:38:05.133 に答える
0

jsFiddle の動作 - 見てみましょう:

http://jsfiddle.net/dane/FyThW/21/

/* Menu */
.menu{
background-color: gray;
height: 70px;
}
.primary_menu{
display: block;
margin: 0px auto;
width: 980px;
height: 70px;
background-color: lightgray;
}
.primary_menu ul{
list-style-type: none;
text-align: center;
}
.primary_menu ul li{
    display: inline-block;
}​
于 2012-10-10T10:45:18.360 に答える