将UL列表定位在wordpress菜单之后

Question

在wordpress中，我已经能够修改菜单以显示在左侧，但我有社交图标(facebook，twitter..etc)，我想要显示在导航菜单的末尾。现在我所做的是修改我的header.php文件，并插入带有这些图标的UL列表，以显示在Menu..but的底部，因为您可以看到它是重叠的。这是一张happening..and的图片，下面是我的代码。

​

​

<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;}

Answer 1

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

</nav><!-- #access -->
<div style="clear:both;"></div> <--here 
<ul class="social">