中心菜單並將背景顏色擴展到包裝的寬度

Question

我該如何居中這兩個菜單並將每個#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%; 
} 

Answer 1

如果我確實瞭解您的問題，margin: 0 auto;是以div爲中心的好方法。
但對於背景顏色，是不是最好使用對背景的div的：
<div id="nav">和<div id="subnav">？

的CSS：

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

DEMO