长导航菜单换行后重叠问题求助：如何调整行间距？

问题出在你给.navigation li设置了display: inline——行内元素（inline）不支持垂直方向的margin（margin-top/margin-bottom），所以你设置的margin-top:5px完全不起作用，再加上行内元素的基线对齐规则，就导致了第二行和第一行重叠。

给你两个可行的修复方案，推荐第一种：

方案一：改用inline-block布局（推荐） #

把li的display改成inline-block，它既保留了行内排列的特性，又支持块级元素的margin/padding属性，再配合垂直对齐和容器行间距，就能彻底解决重叠问题：

/* 修正li的样式 */
.navigation li {
    display: inline-block; /* 替换inline为inline-block */
    vertical-align: top; /* 让每行的菜单项顶部对齐，避免错位 */
    margin: 5px 3px; /* 上下5px间距，左右3px，简化写法 */
}

.navigation a:link {
    padding: 4px;
    color: #ffffff;
    border: 2px solid #2304d1;
    font-size: 30px;
    text-decoration: none;
    display: block; /* 可选，让点击区域铺满整个li，提升交互体验 */
}

/* 可选：给导航容器设置行高，进一步稳定行间距 */
.navigation {
    line-height: 1.8; /* 根据字体大小调整，30px字体用1.8倍足够拉开间距 */
}

方案二：通过容器行高修复（不修改li的display） #

如果不想改动li的display属性，可以给导航容器设置足够大的line-height，同时把a改成inline-block（确保padding和border的高度被正确计算）：

.navigation {
    line-height: 48px; /* 计算方式：字体30px + 上下padding8px + 上下边框4px = 42px，设48px留足间距 */
}

.navigation li {
    display: inline;
}

.navigation a:link {
    display: inline-block; /* 让垂直padding和border参与行高计算 */
    margin: 3px;
    padding: 4px;
    color: #ffffff;
    border: 2px solid #2304d1;
    font-size: 30px;
    text-decoration: none;
}

两种方案都能解决重叠问题，方案一的灵活性更高，后续调整菜单项样式会更方便。

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