0

私はWeb開発にかなり慣れていません。ナビゲーションバーをページの水平方向の中央に配置しようとしていますが、ここで他の同様の質問を見てみましたが、まだ実現できません。前もって感謝します。

www.livewasteless.com

私のCSS：

#mainNav{   
 background: #fff;
 height:40px;   

}

#mainNav li{
 float: left;
 list-style-type: none;
 z-index: 50;
 border-right: 1px solid #eee;
}

#mainNav li:last-child { border-right: 0; }

#mainNav ul a{
 display: block;
 text-decoration: none;
 padding-left: 28px;
 padding-right: 28px;
 padding-top: 15px;
 padding-bottom: 15px;
 font-size: 12px;
 color: #333333;
 font-weight: bold;
 text-transform: uppercase;
 height: inherit;
}

#mainNav ul ul a{
 line-height: 15px;
 font-weight: normal;
 border-top: none;  
}

私のHTML：

                <!-- BEGIN NAV WRAP --> 
            <div class="nav-wrap">



                <!-- BEGIN MAIN NAV FULL -->
                <div class="main" id="mainNav">

                        <ul id="menu-nav-menu" class="sf-menu"><li id="menu-item-696" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-696"><a href="http://www.livewasteless.com/services/">Services</a></li>
<li id="menu-item-695" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-695"><a href="http://www.livewasteless.com/projects/">Projects</a></li>
<li id="menu-item-829" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-829"><a href="http://www.livewasteless.com/resource-center/">Resource Center</a>
<ul class="sub-menu">
    <li id="menu-item-685" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-685"><a href="http://www.livewasteless.com/legislation/">Legislation</a>
    <ul class="sub-menu">
        <li id="menu-item-686" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-686"><a href="http://www.livewasteless.com/legislation/ab-1103/">AB 1103 &#8211; Energy Star Benchmark</a></li>
        <li id="menu-item-687" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-687"><a href="http://www.livewasteless.com/legislation/ab-1881/">AB 1881 &#8211; Landscape Water Conservation</a></li>
        <li id="menu-item-688" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-688"><a href="http://www.livewasteless.com/legislation/ab-531/">AB 531 &#8211; Energy Consumption Disclosure</a></li>
        <li id="menu-item-689" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-689"><a href="http://www.livewasteless.com/legislation/ab-758/">AB 758 &#8211; Energy Audits</a></li>
        <li id="menu-item-691" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-691"><a href="http://www.livewasteless.com/legislation/ab-920/">AB 920 &#8211; Surplus Solar Generation</a></li>
        <li id="menu-item-690" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-690"><a href="http://www.livewasteless.com/legislation/ab-811/">AB 811 &#8211; PACE Financing</a></li>
        <li id="menu-item-692" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-692"><a href="http://www.livewasteless.com/legislation/calgreen/">CALGreen</a></li>
        <li id="menu-item-693" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-693"><a href="http://www.livewasteless.com/legislation/carbon-reduction-surcharge/">Carbon Reduction Surcharge</a></li>
        <li id="menu-item-694" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-694"><a href="http://www.livewasteless.com/legislation/sb-32/">SB 32</a></li>
    </ul>
</li>
</ul>
</li>
<li id="menu-item-682" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-682"><a href="http://www.livewasteless.com/about/">About Us</a></li>
<li id="menu-item-799" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-799"><a href="http://www.livewasteless.com/contact/">Contact</a></li>
<li id="menu-item-683" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-683"><a href="http://www.livewasteless.com/affiliations/">Affiliations</a></li>
<li id="menu-item-802" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-802"><a href="http://www.livewasteless.com/posts/">Blog</a></li>
</ul>               
                <!-- END MAIN NAV FULL -->
4

3 に答える 3

0

私がここで答えたように- あなたはに追加することができinline-blockますul

CSSでこれらを変更します

#mainNav{   
 background: #fff;
 height:40px;   
 text-align:center;
}
ul#menu-nav-menu{
 display: inline-block;
}
于 2013-06-10T20:38:16.853 に答える
0

これを親要素の CSS に追加します。

margin:0 auto;
于 2013-06-10T20:30:17.860 に答える