我的左对齐Logo右对齐菜单的Flexbox导航栏为何无法正常工作？

问题根源 #

1. HTML结构错误：菜单<ul class="header__menu">被嵌套在.header__logo容器内，导致.header__nav的justify-content: space-between完全失效（因为它只有一个子元素）。
2. CSS属性冗余：.header__logo设置的flex:1会让它占据导航栏全部可用空间，进一步挤压菜单的布局位置。

修正后的代码 #

HTML结构调整

<header>
  <nav class="header__nav">
    <div class="header__logo">
      <h4>SushiMan</h4>
      <div class="header__logo-overlay"></div>
    </div>
    <ul class="header__menu">
      <li>
        <a href="#menu">Menu</a>
      </li>
      <li>
        <a href="#menu">Food</a>
      </li>
      <li>
        <a href="#menu">Services</a>
      </li>
      <li>
        <a href="#menu">About Us</a>
      </li>
      <li>
        <img src="./assets/search.svg" alt="search"/>
      </li>
    </ul>
    <ul class="header__menu-mobile">
      <li>
        <img src="./assets/menu.svg"/>
      </li>
    </ul>
  </nav>
</header>

CSS样式优化

.header__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  overflow: hidden;
}

.header__logo {
  display: flex;
  position: relative;
  padding: 20px;
  /* 移除flex:1，避免占据全部空间 */
}

.header__logo-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
}

/* 菜单横向排列基础样式 */
.header__menu {
  display: flex;
  list-style: none;
  gap: 20px;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* 默认隐藏移动端菜单，可通过媒体查询在小屏显示 */
.header__menu-mobile {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

关键改动说明 #

• 将菜单容器与logo容器设置为同级，让.header__nav的space-between属性正常工作，实现logo左对齐、菜单右对齐。
• 移除.header__logo的flex:1，避免它抢占菜单的布局空间。
• 给菜单添加flex布局，清除默认列表样式并设置项间距，保证横向排列的美观性。

内容的提问来源于stack exchange，提问作者riddhi