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

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>