本文详解如何通过 css flexbox 将导航菜单水平居中、为菜单项添加均匀内外间距，并配合伪元素实现从左到右的平滑下划线悬停动画。
要打造一个专业、响应友好且视觉流畅的导航栏，核心在于正确运用 Flexbox 布局模型。在原始代码中，.nav li 被错误地设为 display: inline-flex，而真正需要应用 justify-content: space-around 的容器是 <ul> —— 因为它是所有 <li> 元素的直接父容器。只有当父容器启用 display: flex 后，其子元素（即 <li>）才能被 flex 属性控制。
以下是优化后的完整 CSS 实现（已修正拼写错误 ox-sizing → box-sizing，并增强健壮性）：
* {
box-sizing: border-box; /* 修复原代码中的拼写错误 */
margin: 0;
padding: 0;
}
body {
background-color: #333;
color: #fff;
font-family: 'Kalam', cursive;
}
header {
padding: 1.5rem 0; /* 垂直内边距，提升呼吸感 */
}
.nav ul {
display: flex;
justify-content: space-around; /* 关键：使每个 <li> 均匀分布并留出外围空间 */
align-items: center; /* 垂直居中对齐 */
list-style: none; /* 移除默认圆点 */
margin: 0;
padding: 0;
}
.nav li {
margin: 0 0.75rem; /* 可选：微调左右间距，避免过紧 */
}
.nav a {
text-decoration: none;
color: #fff;
font-size: 1.1rem;
padding: 0.75rem 1rem; /* 提供点击热区，提升移动端体验 */
position: relative;
transition: color 0.2s ease; /* 配合下划线，整体更协调 */
}
/* 下划线动画：从左到右伸展 */
.nav a::after {
content: '';
display: block;
height: 3px;
width: 0;
background-color: #fff;
transition: width 0.3s ease-in-out;
position: absolute;
bottom: 0;
left: 0;
}
.nav a:hover::after {
width: 100%;
}
.nav a:hover {
color: #ffd700; /* 悬停时文字变色，增强反馈 */
}✅ 关键要点说明：
- ✅ display: flex 必须作用于 <ul>（而非 <li> 或 .nav），否则 space-around 不生效；
- ✅ justify-content: space-around 会在首尾项外侧也分配一半间距，天然实现“文字周围有空间”的效果；
- ✅ 移除 <li> 上冗余的 display: inline-flex 和 justify-content，避免布局冲突；
- ✅ 补充 padding 和 margin 微调，确保在不同屏幕下仍有舒适可读性；
- ✅ 修复 box-sizing 拼写错误，保障盒模型计算准确。
? 进阶提示：
如需适配移动端，可在媒体查询中将 flex-direction: column 并切换为汉堡菜单；若希望下划线起始位置更精准（如从文字左侧开始而非容器左侧），可将 ::after 的 left 改为 0 并配合 transform: translateX(0) 初始化，再用 transition 控制位移。
这套方案简洁高效，兼顾语义结构、视觉平衡与交互细节，是现代前端导航栏的推荐实践。
