我想两端对齐 img 和 nav 标签

Question

现象 img 标签和 nav 标签不合理。

预期值 我想两端对齐 img 和 nav 标签。

重现步骤 运行请输入以下代码。

.header {
    .header__wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 960px;
        height: 60px;
        padding: 0px 76.1095px;
        margin: 0px 471.5px;
        justify-content: space-evenly;
        img {
             /* omitted */
        }
        nav {
　　　　　　　 /* omitted */
                .header__nav-link {
　　　　　　　　　/* omitted */
                }
            }
            .header__nav-li_bicycle {
                list-style: none;
                width: 74.695px;
                .header__nav-link_bicycle {
                /* omitted */
                }
            }
        }
    }
}

<header class="header">
        <div class="header__wrapper">
                <img class="header__profile-icon" src="image/logo.svg" alt="プロフィール">
            <nav class="header__nav">
                <li class="header__nav-li"><a href="" class="header__nav-link">About</a></li>
                <li class="header__nav-li_bicycle"><a href="" class="header__nav-link_bicycle">Bicycle</a></li>
            </nav>
        </div>
</header>

Answer 1

您可以尝试使用以下纯 CSS 来达到您想要的结果。我添加了一些弹性框并对齐了项目，因此它们 space 与您的图像大致相同。请参阅下面的 CSS 更改。

.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 960px;
  justify-content: space-evenly;
  width: 100%;
}

li {
  list-style-type: none;
}

ul {
  display: flex;
  gap: 20px;
}

.header__wrapper {
  display: flex;
  align-items: center;
  gap: 30vw;
}

<header class="header">
  <div class="header__wrapper">
    <img class="header__profile-icon" src="image/logo.svg" alt="プロフィール">
    <nav class="header__nav">
      <ul>
        <li class="header__nav-li"><a href="" class="header__nav-link">About</a></li>
        <li class="header__nav-li_bicycle"><a href="" class="header__nav-link_bicycle">Bicycle</a></li>
      </ul>
    </nav>
  </div>

我想两端对齐 img 和 nav 标签

I want to be both ends aligned the img and nav tags

html

css

sass

flexbox