使用Flex实现网站右上角菜单时overlay导致对齐失效如何解决

问题原因 #

• 你当前的.overlay容器仅设置了宽高，没有配置flex布局规则，内部元素默认左对齐，是导致添加overlay后菜单偏移的核心原因
• .nav重复声明了flex: 50%，但父元素.overlay不是flex容器，该属性完全不生效，还会导致内部宽度计算异常
• .right-container重复声明display: flex属于冗余代码，没有配置对齐属性也会增加布局异常概率

解决方案 #

只需要调整.overlay和.nav的样式即可，无需移除overlay元素：

1. 给.overlay添加flex布局，设置内部内容右对齐、垂直居中
2. 删除.nav无效的flex:50%声明
3. 补充必要的对齐规则避免布局抖动，同时修正HTML标签不规范问题

修改后完整代码如下：

html {
  background-color: gray;
}

.navbar {
  height: 70px;
  padding: 0 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center; /* 补充导航栏整体垂直居中 */
}

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

.overlay {
  width: 50px;
  height: 50px;
  /* 新增flex布局和对齐规则 */
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.nav .nav-item {
  list-style: none; /* 去掉li默认的圆点样式 */
  .nav-link {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 1rem;
    font-size: 14px;
    font-weight: 600;
    color: $clr-carbonLT;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
    position: relative;
    text-transform: uppercase;
    &:hover {
      background-color: rgba(0, 0, 0, 0.05);
    }
    &.active {
      color: $clr-carbon;
      &::after {
        content: '';
        transform: translateY(0);
      }
    }
  }
}

<div class="navbar">
  <div class="right-container">
    <div class="overlay">
      <div class="nav">
        <ul> <!-- 补充ul标签包裹li，符合HTML语法规范 -->
          <li class="nav-item">
            <button class="nav-link btn" (click)="toggleSidebar()"><i class="mdi mdi-menu"></i></button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

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