1

次のワードプレス サイトにナビゲーション バーがあります: http://tarjom.ir/demo/pwp

このナビゲーション バーには 2 つの大きな問題があります。

1- 真ん中に垂直に揃えることができません。

2-タグdivの親として、<ul>削除できないラッパーがあります。ただし、すでに設定'container' => ''していますが、機能しません。

<!-- Navigation bar-->
  <div id='wp_nav_section' class='grid-100 black-gray-bg font-roya' style='min-height: 100px; display: block;height:100%;'>
    <?php wp_nav_menu(array("container" => 'nav')); ?> 
  </div>
<!-- End of navigation bar. -->

ここに私のワードプレスのナビゲーションコードがあります:

WordPress ナビゲーションに関連するすべての CSS を次に示します。

.menu
    {
        height: 65px;
        min-height: 60px;   
        padding: 0px;
        text-align: right;
        background-color: #111;
        margin-bottom: 10px;
    }
.menu ul
    {
     direction: rtl;
     width: 70%;
     margin-right: auto;
     margin-left: auto;
     overflow: hidden;
     height: auto;
     padding-top: 0px;
    }
.menu li
    { 
      padding: 0px 0px;
      display: inline-block; 
    }
    .menu li a
    {
      color: white;
      text-decoration: none;
      display: block ;
      height: 45px;
      background-color: black; 
      border-right: 2px #333 solid; 
      padding: 16px 7% 3px 3%;
      box-sizing: border-box;
      width: 100px;
      margin: 0px 0px;
      font-size: 110%;
    }
    .menu li a:hover
    {
        background-color: #333;
        border-right: 2px #F90 solid;
    }

<ul>タグを<div>ラッパーの垂直方向の中央に配置する必要があります。

ありがとうございます。

4

2 に答える 2

2

.menu{}クラスから高さを削除します。これにより、垂直方向の配置の問題が解決されます。

于 2013-08-17T04:53:26.187 に答える
1

まだ試していない場合は、これを試してみます。

<?php wp_nav_menu( 
array ( 
'container' =>false,
'items_wrap' => '%3$s', //"%3$s" is the li list itself. See below for the default value.
 ) ); ?>

これら 2 つのパラメーターのデフォルト値は次のとおりです。

'container'       => 'div',
'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',

したがって、wp_nav_menu() への呼び出しでそれらを希望どおりに定義するようにします。

詳細については、http://icode4you.net/wordpress-tricks-customizing-the-output-of-wp_nav_menu/の私の投稿をご覧ください。

UL を div の中央に配置するには、次のコードを使用します。

<style>
div {
text-align:center;
}

ul {
display:inline-block;
}

</style>

さらに情報やヘルプが必要な場合はお知らせください:)

于 2014-05-25T21:48:53.280 に答える