css float left，right和clearfix是我的代码错误？

Question

下面是导航菜单图片 - 我想将菜单链接与社交图标对齐，但在尝试了一小时之后......我被卡住了......我需要帮助。我还是一名学生，我想开发wordpress主题......谢谢

下面的

是我的代码

HTML - 我使用wordpress ...

<div class="menus">
  <nav id="nav-menus" class="nav-menus">
    <?php $args = array('theme_location' => 'primary'); 
      wp_nav_menu( $args );
    ?>
  </nav>
  <div class="social">
    <ul>
      <li>
        <i class="fa fa-facebook-square fa-2x"></i>
      </li>
      <li>
        <i class="fa fa-twitter-square fa-2x"></i>
      </li>
      <li>
        <i class="fa fa-youtube-square fa-2x"></i>
      </li>
      <li>
        <i class="fa fa-google-plus-square fa-2x"></i>
      </li>
      <li>
        <i class="fa fa-youtube-square fa-2x"></i>
      </li>
    </ul>
  </div>
</div>

CSS

#nav-menus{
    height: 50px;
    width: 100%;
    background-color: #f68e56;
}
.menus > .nav-menus{
    border-radius: 20px;

}
.menus > .nav-menus ul{
    float: left;
}
.menus > .nav-menus ul li{
    font-size: 32px;
    display: inline;
    padding-left: 17px;
    line-height: 50px;
}
.menus > .nav-menus ul li a{
    text-decoration: none;
    color: white;
}
.menus > .nav-menus ul li a:hover{
    color: yellow;
}
.menus > .social ul{
    float: right;
}
.menus > .social ul li{
    display: inline;
}
.menus > .social ul li i{
    padding-left: 10px;
}

Answer 1

您需要将social div和nav元素浮动，而不是ul。试试这个：

* {margin:0;padding:0}body{padding-top:50px;}
.menus {
  height: 50px;
  width: 100%;
  background-color: #f68e56;
  border-radius: 20px;
}
.menus > .nav-menus {
  float: left;
}
.menus > .nav-menus ul li {
  font-size: 22px;
  display: inline;
  padding-left: 17px;
  line-height: 50px;
}
.menus > .nav-menus ul li a {
  text-decoration: none;
  color: white;
}
.menus > .nav-menus ul li a:hover {
  color: yellow;
}
.menus > .social {
  float: right;
}
.menus > .social ul li {
  display: inline;
  line-height:50px;
}
.menus > .social ul li i {
  padding-left: 10px;
}

<div class="menus">
  <nav id="nav-menus" class="nav-menus">
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
    </ul>
  </nav>
  <div class="social">
    <ul>
      <li>
        <i class="fa fa-facebook-square fa-2x">1</i>
      </li>
      <li>
        <i class="fa fa-twitter-square fa-2x">2</i>
      </li>
      <li>
        <i class="fa fa-youtube-square fa-2x">3</i>
      </li>
      <li>
        <i class="fa fa-google-plus-square fa-2x">4</i>
      </li>
      <li>
        <i class="fa fa-youtube-square fa-2x">5</i>
      </li>
    </ul>
  </div>
</div>