本文详解如何用 css flexbox 实现水平居中的响应式导航栏，通过 `justify-content: space-around` 均匀分配菜单项间距，并为链接添加从左到右的平滑下划线悬停动画。
要实现导航栏在页面中水平居中、各菜单项（About / Experience / Works / Hobbies）之间保持均匀间距，并支持优雅的悬停下划线动画，核心在于正确应用 Flexbox 布局层级。
问题根源在于：原代码中 .nav li 设置了 display: inline-flex，但 justify-content: space-around 并未生效——因为该属性仅对 Flex 容器（flex container） 有效，而真正需要布局的是 <ul> 元素（其子元素 <li> 才是直接参与排列的 flex items）。因此，必须将 display: flex 应用于 <ul>，而非 <li>。
以下是优化后的完整解决方案：
✅ 正确的 CSS 结构（关键修改已高亮）
* {
box-sizing: border-box; /* 修正原代码拼写错误：ox-sizing → box-sizing */
margin: 0;
padding: 0;
}
body {
background-color: #333;
color: #fff;
font-family: 'Kalam', cursive;
}
header {
padding: 1.5rem 0; /* 增加上下内边距，提升视觉呼吸感 */
}
/* ✅ 关键：将 ul 设为 flex 容器，实现居中与 spacing */
.nav ul {
display: flex;
justify-content: space-around; /* 均匀分配项间及边缘空白 */
align-items: center; /* 垂直居中对齐（兼容不同行高） */
list-style: none; /* 移除默认圆点 */
margin: 0;
padding: 0;
}
.nav a {
text-decoration: none;
color: #fff;
font-size: 1.1rem;
padding: 0.5rem 0.8rem; /* 可选：为点击区域增加内边距 */
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 li 的 inline-flex —— 它现在是 flex item，无需自身 flex */
.nav li {
list-style: none; /* 仅清除列表符号，不干扰 flex 布局 */
}? 注意事项与进阶建议
- 拼写修正：原代码中 ox-sizing 是明显笔误，必须改为 box-sizing，否则重置样式失效。
- 语义化增强：可将 <div class="nav"> 替换为 <nav> 语义化标签，提升可访问性。
-
响应式适配：在小屏幕下，space-around 可能导致文字换行或溢出。建议配合媒体查询添加断点：
@media (max-width: 768px) { .nav ul { flex-direction: column; gap: 0.8rem; /* 垂直堆叠时用 gap 更可控 */ align-items: center; } } - 动画优化：若需更精细控制（如只在 hover 时显示下划线），可添加 opacity: 0 + transition: opacity 配合 width，避免初始渲染闪烁。
通过以上调整，导航栏将完美居中显示，每个菜单项拥有相等的左右空间，且悬停时下划线从左向右流畅展开——简洁、专业、符合现代 Web 开发实践。
