html - 在固定标题中对齐图片和 NAV 部分的问题

Question

我正在尝试使用 flexbox 方法放置徽标和 NAV 部分。由于某种原因，它没有对齐。也有人可以解释我做错了什么我可以尝试使用“float”属性，但我只想通过使用 flexbox 方法来做到这一点。

body {
       margin: 0;
       font-family: "Helvetica", "Times New Roman", sans-serif;
       color: seashell;
       background-color: black;
       font-size: 22px;
       text-align: center;
       opacity: 0.9;
      }

    a {
      color: seashell;
      }

    .flex-container {
       display: flex;
       justify-content: center;
       flex-wrap: wrap;
      }

    header {
       width: 100%;
       position: fixed;
       z-index: 1;
       height: 69px;
       background-color: black;
       border-bottom: 1px solid seashell;
       align-items: center;
      }

    header img {
       height: 50px;
       padding-left: 10px;
      }

    nav {
       text-align: right;
       flex-grow: 1;
      }

    nav span {
       display: inline-block;
       padding: 20px 10px;
      }

<header class="flex-contaner">
    <img src="https://s3.amazonaws.com/codecademy- 
             content/courses/freelance-1/unit-4/img-tea-cozy-logo.png">
    <nav>
        <span><a href="#mission">Mission</a></span>
        <span><a href="#tea-of-the-month">Tea of the Month</a></span>
        <span><a href="#locations">Locations</a></span>
    </nav>
</header>

我用其他一些解决方案检查了我的代码，发现它们使用的是相同的代码，它适用于他们，但不适用于我。我正在 Google Chrome 中查看结果

Answer 1

您是否尝试过添加display: inline-block;到nav，这将使它们一起内联显示。

body {
       margin: 0;
       font-family: "Helvetica", "Times New Roman", sans-serif;
       color: seashell;
       background-color: black;
       font-size: 22px;
       text-align: center;
       opacity: 0.9;
      }

    a {
      color: seashell;
      }

    .flex-container {
       display: flex;
       justify-content: center;
       flex-wrap: wrap;
      }

    header {
       width: 100%;
       position: fixed;
       z-index: 1;
       height: 69px;
       background-color: black;
       border-bottom: 1px solid seashell;
       align-items: center;
      }

    header img {
       height: 50px;
       padding-left: 10px;
      }

    nav {
       text-align: right;
       flex-grow: 1;
display: inline-block;
      }

    nav span {
       display: inline-block;
       padding: 20px 10px;
      }

<header class="flex-contaner">
            <img src="https://s3.amazonaws.com/codecademy- 
             content/courses/freelance-1/unit-4/img-tea-cozy-logo.png">
              <nav>
                <span><a href="#mission">Mission</a></span>
                <span><a href="#tea-of-the-month">Tea of the Month</a></span>
                <span><a href="#locations">Locations</a></span>
              </nav>
      </header>

Answer 2

这是你想要做的吗？使用显示：弹性；at header 因为它是 flex 元素的父容器。

body {
       margin: 0;
       font-family: "Helvetica", "Times New Roman", sans-serif;
       color: seashell;
       background-color: black;
       font-size: 22px;
       text-align: center;
       opacity: 0.9;
      }

    a {
      color: seashell;
      }

    .flex-container {
       display: flex;
       flex-wrap: wrap;
      }

    header {
       width: 100%;
       position: fixed;
       z-index: 1;
       height: 69px;
       background-color: black;
       border-bottom: 1px solid seashell;
       align-items: center;
       display:flex;
      }

    header img {
       height: 50px;
       padding-left: 10px;
      }

    nav {
       text-align: right;
       flex-grow: 1;
      }

    nav span {
       display: inline-block;
       padding: 20px 10px;
      }

<header class="flex-container">
            <img src="https://dummyimage.com/150x150/fff/11">
              <nav>
                <span><a href="#mission">Mission</a></span>
                <span><a href="#tea-of-the-month">Tea of the Month</a></span>
                <span><a href="#locations">Locations</a></span>
              </nav>
      </header>