0

ワードプレスでは、左側に表示するようにメニューを変更できましたが、そのナビゲーション メニューの最後に表示したいソーシャル アイコン (Facebook、Twitter など) があります。ここで、header.php ファイルを変更し、これらのアイコンを含む UL リストを挿入して、メニューの下部に表示しました..しかし、ご覧のとおり、重複しています。さて、ここに何が起こっているかの画像があります..そして、以下は私が持っているコードです..

これが私の現在の問題です

<nav id="access" role="navigation">
    <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
    <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
    <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
    <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
    <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
    <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #access -->
<ul class="social">
    <li><a class="youtubeicon" href="#LinkURL">youtube</a></li>
    <li><a class="facebook" href="#LinkURL">facebook</a></li>
    <li><a class="twitter" href="#LinkURL">twitter</a></li>
    <li><a class="pinterest" href="#LinkURL">pinterest</a></li>
    <li><a class="favorite" href="#LinkURL">favorite</a></li>
</ul>

CSS:

ul.social{margin:10px 0 0 25px;}
ul.social li{float:left; padding:2px;}
4

1 に答える 1

0

使用<div style="clear:both"></div>

</nav><!-- #access -->
<div style="clear:both;"></div> <--here 
<ul class="social">
于 2012-11-09T16:41:31.037 に答える