Question

我正在研究我的第一个Wordpress主题（耶！）我正在学习很多关于php的知识。但是，我试图将这个波峰放在导航栏的中间并且它不起作用。基本上我们发生的是：

PHP：

    <nav id="site-navigation" class="main-navigation" role="navigation">
        <h1 class="menu-toggle"><?php _e( 'Menu', 'my' ); ?></h1>
        <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'my' ); ?></a>

        <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    </nav><!-- #site-navigation -->

HTML

<nav id="site-navigation" class="main-navigation" role="navigation">
<h1 class="menu-toggle">Menu</h1>
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>

<div class="menu-left-menu-container"><ul id="menu-left-menu" class="menu"><li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-4"><a href="http://">For Teachers</a></li>
<li id="menu-item-5" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-5"><a href="http://?page_id=2">For Parents</a></li>
 <li id="menu-item-15" class="mycrest menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a title="Go Home" href="#">My Crest</a></li>
 <li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a href="#">Recycle Your Devices</a></li>
<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a href="#">Our Team</a></li>
</ul></div>     
</nav><!-- #site-navigation -->
</header><!-- #masthead -->

CSS：

.main-navigation ul { list-style: none;
                  margin: 0;
                  padding-left: 0;
                  text-align: center; }
.main-navigation li { position: relative;
                  margin-right: 15px;
                  display: inline-block;
                  *display: inline; /*IE7*/
                  *zoom: 1; /*IE7*/ }
.main-navigation a { display: block;
                 text-decoration: none; }
.main-navigation ul ul { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
                     display: none;
                     float: left;
                     left: 0;
                     position: absolute;
                     top: 1.5em;
                     z-index: 99999; }
.main-navigation ul ul ul { left: 100%;
                         top: 0; }
.main-navigation ul ul a { width: 200px }
.main-navigation ul ul li { }
.main-navigation li:hover > a { color: #00aeef }
.main-navigation a:visited { color: #fff }
.main-navigation ul li:hover > ul { display: block }
.mycrest    {
background-image:url(assets/img/my_crest.png);
background-repeat:no-repeat;
width:199px;
height:302px;
font-size:0px;
top:-130px;
}

#site-navigation    {
padding: 0px 15px 0px 15px;
text-transform:uppercase;
text-align:center;
font-size:28px;
color:#fff;
font-family: 'Lato', sans-serif;
height:40px;
background-color:#602D90;
border-top:1px solid #fff;
}

Answer 1

将左边距添加到波峰项：margin-left: 96px;。但是，一旦所有菜单项都无法适合窗口宽度，它就会移动，所以一定要注意这一点。

中心导航栏，中央有徽章（徽标）

1 个答案: