在 wordpress 菜单后定位 UL 列表

Question

在 wordpress 中，我已经能够修改菜单以显示在左侧，但我有一些社交图标（facebook、twitter..etc），我想在导航菜单的末尾显示。现在我所做的是修改我的 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;}

Answer 1

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

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