如何显示与切换按钮在同一行导航元素？

Question

所以，我从学校的功课，以创建一个登陆页面，我们自己设计的。我想有一个覆盖菜单除了切换按钮，有（社会化媒体2，一个用于用户帐户）导航栏内的三个图标。

我有以下HTML和CSS代码，允许我使用的图像作为覆盖菜单，工作正常切换按钮：

HTML

<header>
    <ul class="social">
        <li>
            <img src="/images/facebook.svg" alt="">
        </li>
    </ul>
    <a href="#" class="logo">MyWebSite</a>
    <img src="/images/menu.svg" alt="" class="menu-btn" id="open-menu">
</header>

CSS

header {
    padding: 2em;

    .logo {
        font-weight: bold;
        margin-left: 7em;
    }


    .menu-btn {
        float: right;
        cursor: pointer;
        width: 35px;
        margin-right: 7em;
    }

    .social {
        display: flex;
        float: right;
        list-style: none;
    }
}

另外，我想补充的图标中切换菜单按钮的前面。不过，我现在所得到使用上面的代码，你可以在打印屏幕下方未预期的结果看：

Current results

我会获得，虽然是在下面的打印屏幕所示：

Expected results谁能给我一个提示？我将不胜感激。谢谢

Answer 1

您可以使用flexbox创建所需的布局。

例

header {
  background-color: #ee4;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header h1 {
  margin: 0;
}

.social-icons-container {
  display: flex;
  align-items: center;
}

.social-icons-container i {
  font-size: 20px;
  padding: 0 0 0 30px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<header>
  <h1>Logo</h1>
  <div class="social-icons-container">
    <i class="fab fa-facebook"></i>
    <i class="fab fa-instagram"></i>
    <i class="fas fa-user-alt"></i>
    <i class="fas fa-bars"></i>
  </div>
</header>