0

可能重复：
我们可以在不使用 inline-block 的情况下水平居中那些宽度可变的 div “IE7 及以上”吗？

我正在尝试创建一个菜单，其背景图像跨越屏幕的整个宽度，菜单内容在中间限制为 980px，然后菜单内容在其中心对齐。

像这样：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

有很多方法可以实现您的要求...最简单的方法是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;
}

在这里检查我的答案：我们可以在不使用内联块的情况下水平居中那些宽度可变的 div“IE7 及以上”吗？

于 2012-10-10T10:31:55.513 回答
1

将 .primary_menu li 从 float: left 更改为 display: inline-block 应该使菜单项居中对齐

于 2012-10-10T10:38:32.520 回答
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 回答