React下拉导航栏Nested Flexbox布局异常：如何调整实现目标样式

核心问题原因 #

.list-container 默认仅包裹内部内容，没有足够宽度支撑 justify-content 属性生效，所以设置的布局规则无法体现。

CSS 修改代码 #

1. 调整导航栏与容器的基础布局

修改 navbar 和 list-container 的样式，让容器占满剩余空间：

.navbar{
    display : flex;
    align-items: center;
    gap: 30px;
    width: 100%; /* 让导航栏铺满屏幕宽度 */
    padding: 0 20px; /* 避免内容贴边，可按需调整 */
}

.list-container{
    display: flex;
    justify-content: space-between; /* 让左、右列表分别居左和居右 */
    flex: 1; /* 占满导航栏除logo外的剩余空间 */
}

2. 完善下拉菜单样式（修复布局错乱）

添加下拉菜单的定位与美化样式，避免挤开原有布局：

.navbar-items {
    margin : 20px;
    position: relative; /* 为下拉菜单提供定位基准 */
    list-style: none; /* 移除默认列表圆点 */
    cursor: pointer;
}

.dropdown-list {
    position: absolute;
    top: 100%; /* 紧贴父元素下方显示 */
    left: 0;
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 12px 0;
    list-style: none;
    min-width: 160px;
}

.features-items, .company-items {
    padding: 8px 20px;
    cursor: pointer;
}

.features-items:hover, .company-items:hover {
    background-color: #f5f5f5; /* 悬停高亮效果 */
}

3. 补充列表基础样式

给左右列表添加对齐规则，确保排版统一：

.left-list, .right-list {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    list-style: none; /* 移除默认圆点 */
}

效果说明 #

修改后：

• 导航栏会铺满整个屏幕宽度
• 左侧列表居左、右侧登录/注册按钮居右，符合目标样式布局
• 下拉菜单悬浮在父元素下方，不会打乱原有导航布局

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