0

これら 2 つのメニューを中央に配置し、それぞれの背景色を の#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 に答える