0

我如何将这两个菜单居中并将每个菜单的背景颜色扩展#wrap到整个宽度#wrap？

我正在研究可以告诉浏览器将 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%;
}
4

1 回答 1

0

如果我确实理解您的问题，那么这是使divmargin: 0 auto;居中的好方法。但是对于背景颜色，使用div 的:和的背景不是更好吗？

<div id="nav"><div id="subnav">

CSS：

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

演示

于 2013-10-30T16:52:20.350 回答