Flex布局导航栏a标签无法均匀分布，Consoles标签未居中求助

你的问题源于flex布局的冲突设置：.navbar li中的margin: auto会和父元素的justify-content规则互相干扰，导致子元素无法按预期均匀分布；再加上三个链接文字长度不同，视觉上的偏移会更明显。可以通过以下调整解决：

修复步骤： #

• 移除.navbar li里的margin: auto，避免干扰父容器的flex分布逻辑
• 给每个.navbar li设置flex: 1，让三个li平分导航栏总宽度，确保每个区域大小一致
• 给.navbar li添加居中样式，让链接文字在各自区域内水平居中

修改后的完整CSS代码： #

.navbar {
    display: flex;
    justify-content: space-around; /* 改用space-evenly效果也一致 */
    padding: 0 1%;
    list-style: none;
    background-color: var(--secondary-highlight-colour);
    border-radius: var(--border-radius);
}

.navbar li {
    align-self: center;
    flex: 1; /* 关键：让每个li平分父容器宽度 */
    text-align: center; /* 让a标签在li内居中 */
}

.navbar li a {
    color: var(--background-black);
    font-size: 2vw;
}

额外优化（可选）： #

如果想提升交互体验，让整个li区域都能响应点击，可以给.navbar li a添加：

.navbar li a {
    /* 原有样式 */
    display: block;
    padding: 1rem 0;
}

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