CSS使用inline-flex开发footer时导航链接重叠问题如何解决？

你当前遇到的导航链接重叠问题核心有三个原因：

1. 作为flex容器的.nav没有给内部li元素设置固定间距，flex子元素默认允许收缩，当容器宽度不足时就会互相挤压导致文字重叠
2. 给左侧h3设置了固定的padding-right: 6.7em，会主动挤压右侧导航的可用空间，进一步加剧拥挤
3. 你之前尝试的justify-content: space-around不生效是因为导航容器本身没有足够的剩余空间可供分配，该属性仅在容器有富余宽度时才会发挥间距作用

修正后的CSS代码 #

.footer-nav {
    border-top: 1px solid lightgrey;
    padding: 1.5625em 0;
    display: flex;
    justify-content: space-between;
    /* 可选：添加水平内边距防止内容紧贴视口边缘 */
    padding-inline: 1em;
    /* 让左侧姓名和右侧导航垂直居中对齐 */
    align-items: center;
}

.footer-nav h3 {
    font-size: 1em;
    /* 删掉无用的padding-right和list-style-type，h3不属于列表元素不需要列表样式 */
    margin: 0;
}
.nav{
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    /* 核心：给导航项设置固定间距，不会随容器缩放消失，从根源避免重叠 */
    gap: 2em;
}
/* 可选优化：调整链接点击区域和基础样式 */
.nav a {
    text-decoration: none;
    color: inherit;
}

补充说明 #

如果你的项目需要兼容非常旧的浏览器不支持gap属性，可以把gap: 2em替换为给.nav li添加margin-inline: 1em，二者实现的间距效果基本一致。

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