Question

如何将这两个菜单居中，并将每个#wrap的背景颜色扩展为#wrap的全宽？ < / p>

我正在考虑可以告诉浏览器将div视为表格单元格，即display: table; margin: 0 auto;。

这是对的吗？有没有更好的方法来使菜单居中并填充#wrap背景颜色？

这是一个小提琴：http://jsfiddle.net/kwcp4/1/

HTML：

<div id="wrap">
<div id="nav">
<div class="wrap">
<ul class="menu menu-primary">
<li class="menu-item"><a href="http://#">Menu 1 Link 1</a></li>
<li class="menu-item"><a href="http://#">Menu 1 Link 2</a></li>
<li class="menu-item"><a href="http://#">Menu 1 Link 3</a></li>
<li class="menu-item"><a href="http://#">Menu 1 Link 4</a></li>
</ul>
</div>
</div>

<div id="subnav">
<div class="wrap">
<ul class="menu menu-secondary">
<li class="menu-item"><a href="http://#">Menu 2 Link 1&nbsp;</a></li>
<li class="menu-item"><a href="http://#">Menu 2 Link 2&nbsp;</a></li>
<li class="menu-item"><a href="http://#">Menu 2 Link 3&nbsp;</a></li>
<li class="menu-item"><a href="http://#">Menu 2 Link 4&nbsp;</a></li>
</ul>
</div>
</div>

CSS：

#wrap {
    border: 1px solid #000;
    margin: 0 auto;
    width: 600px;
    padding: 0;
}

.menu-primary,
#header .menu {
    background-color: #FE9DA6;
    clear: both;
    color: #fff;
    font-size: 14px;
    margin: 0 auto;
    overflow: hidden;
    width: auto;
}

.menu-secondary,
#header .menu {
    background-color: #2EA379;
    clear: both;
    color: #fff;
    font-size: 14px;
    margin: 0 auto;
    overflow: hidden;
    width: auto;
}


.menu-primary,
.menu-secondary {
    padding: 5px; 
}


.menu-primary,
.menu-secondary {
    display: table; margin: 0 auto;
}

.wrap {
    width: auto;display: table;margin: 0 auto;
}  


.menu-primary ul,
.menu-secondary ul,
#header .menu ul {
    float: left;
    width: 100%;
}

.menu-primary li,
.menu-secondary li,
#header .menu li {
    float: left;
    list-style-type: none;
}

.menu-primary a,
.menu-secondary a,
#header .menu a {
    color: #fff;
    display: block;
    padding: 7px 8px 6px;
    position: relative;
    text-decoration: none;
}

#header .menu a {
    padding: 8px 15px 7px;
}

#header {
    margin: 0 auto;
    height: auto;
    width: 100%;
}

Answer 1

如果我理解你的问题，margin: 0 auto;是一个很好的方式来集中 div 。
但是对于背景颜色，使用 div 上的背景不是更好：
<div id="nav">和<div id="subnav">？

<强>的CSS：

#nav {background-color: #FE9DA6;}
#subnav {background-color: #2EA379;}

<强> DEMO

中心菜单并将背景颜色扩展到包装器的宽度

1 个答案: