导航栏justify-content属性失效，求解决方法

我一直在找有同样问题的人，但还是搞不懂为啥导航栏的justify-content属性没效果，相关CSS代码如下：

nav {
    display: flex;
    padding: 2% 3%;
    justify-content: space-around;
    align-items: center;
}

.nav-links {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.nav-links ul li {
    list-style: none;
    display: inline-block;
    position: relative;
    padding-bottom: 0.5rem;
}

.nav-links ul li a {
    color: #fff;
    text-decoration: none;
}

编辑说明：完整代码片段已整理如上

问题出在这几个地方： #

1. .nav-links的flex:1把空间占满了：你的nav是flex容器，设置了justify-content: space-around，但里面的.nav-links加了flex:1，会让它吃掉nav里所有剩余空间，导致justify-content没有多余空间来分配左右间距，自然看不到效果。
2. ul的默认内外边距捣乱：浏览器默认给ul加了margin和padding，会让导航列表的布局超出预期。

调整后的代码： #

nav {
    display: flex;
    padding: 2% 3%;
    justify-content: space-around;
    align-items: center;
    width: 100%; /* 确保nav占满父容器宽度 */
    box-sizing: border-box; /* 让padding算在宽度里，避免超出 */
}

.nav-links {
    /* 删掉flex:1，让它根据内容自适应宽度 */
    font-size: 18px;
    font-weight: bold;
}

.nav-links ul {
    margin: 0;
    padding: 0; /* 清除ul默认的内外边距 */
    display: flex; /* 用flex布局列表项，比inline-block更靠谱 */
    gap: 2rem; /* 直接控制每个li之间的间距 */
}

.nav-links ul li {
    list-style: none;
    position: relative;
    padding-bottom: 0.5rem;
}

.nav-links ul li a {
    color: #fff;
    text-decoration: none;
}

核心调整： #

• 去掉.nav-links的flex:1，给nav的justify-content留出发挥空间；
• 给nav加width:100%和box-sizing:border-box，保证宽度计算正确；
• 把ul改成flex布局，用gap控制间距，同时清除默认边距，解决inline-block可能出现的空白问题。

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