0

そのための簡単なCSS修正があることを願っています。問題は非常に単純です。私はカスタム ワードプレス テーマを作成しており、いくつかのカスタム メニューを使用しています。コードは正常に動作していますが、セパレーター付きのインライン メニュー css スタイルを作成しました (border-left: 1px などから作成)。 css を参照してください)、表示バグがあります。

デフォルトのWordPressメニュー（WordPressページのリスト）の場合、メニューは正常に表示されますが、WordPress管理パネルのメニューエディターを使用してカスタムリンクを挿入すると、セパレーターが何らかのスペースで押されます!

生成された htmlの問題を示す jsFiddleを参照してください。

関数.php

register_nav_menus(
    array( 'header-menu' => __( 'Header Menu' ), 'footer-menu' => __( 'Footer Menu' ))
);

フッター.php

<div id="last-footer">
<div id="last-footer-container" class="container_12">
    <div id="last-footer-menu" class="grid_12" align="center">
        <?php 
            wp_nav_menu( array( 'theme_location' => 'footer-menu' ) );
        ?>  
    </div>  
    <div class="clear"></div>
          <!-- other stuff here (widgets) -->
</div><!-- #last-footer-container end -->

style.css (lesscss :P で生成)

#last-footer {
  background:#222;
  color:white;
}
#last-footer-container {
  padding-bottom:10px;
  padding-top:10px;
}
#last-footer-container a { color:#a62e0d; }
#last-footer-container a:hover {
  text-decoration:none;
  color:#602000;
  text-shadow:1px 1px 1px black;
}
#last-footer-container span { float:left; }

#last-footer-menu ul {
  margin:0;
  padding:0;
}
#last-footer-menu ul li {
  border-left:1px solid #121212;
  border-right:1px solid #323232;
  display:inline;
  padding-left:10px;
  padding-right:10px;
  margin:0;
}
#last-footer-menu ul li:first-child { border-left:none; }
#last-footer-menu ul li:last-child { border-right:none; }
4

1 に答える 1

1

これを見てみようと思ったのですが、結局私も気が狂いました。この問題display: inlineは、#last-footer-menu ul liセレクターに関連しています。

私はそれらのリンクのそれぞれをフローティングさせてから、この昔ながらのテクニックを使用して中央のナビゲーションメニューを作成しました -順序付けられていないリストを水平方向に中央に配置する

これがJS Fiddleです-> http://jsfiddle.net/rabmcnab/zvCsC/1/

これに対するよりクリーンで卑劣な解決策を見たいと思っています.CSSの変更を少なくして達成する代替案を誰かが検討するかどうかを確認します.

于 2012-08-21T22:05:16.920 に答える