nav中a标签默认inline导致横排无间距，应使用flex布局控制对齐与间距，小屏需响应式折叠，并兼顾可访问性与兼容性。
nav 里 a 标签默认是行内元素，直接写会挤成一排但没间距
HTML5 的
本身只是语义容器，不带任何样式。里面放 默认是 display: inline，所以天然横排——但问题在于：没对齐、没间隔、hover 无反馈、移动端易错位。
实操建议：
- 给
display: flex，比纯inline更可控 - 用
justify-content: space-between或space-around管理水平间距，避免手动加 - 给每个
加display: block或inline-block，才能设置宽高、padding 和 hover 效果 - 务必加
text-decoration: none去掉下划线，否则横排时视觉杂乱
用 flex 布局让 nav 横排更稳，兼容性够用
IE10+、所有现代浏览器都支持 display: flex，比老式 float 或 inline-block + font-size: 0 清理间隙的方式更干净。
常见错误现象：加了 flex 但子项还是换行——大概率是容器宽度不够或子项 flex-shrink: 1 导致压缩。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 给
display: flex; align-items: center;垂直居中文字 - 子项（如
或flex: 0 0 auto防止被压缩变形 - 用
gap: 1rem控制项间距（Chrome 100+ / Firefox 104+ 支持），老版本退回到margin-right - 别忘了
flex-wrap: nowrap（默认值），防止小屏下意外折行
响应式横排导航在小屏下必须收起，不能硬撑
纯横排在手机上必然溢出或文字重叠，@media 切换不是可选项，是必做项。
使用场景：导航项 ≤ 5 个时可用汉堡菜单；≥ 6 个建议配合 JS 控制显隐，否则纯 CSS 的 checkbox hack 在 iOS Safari 有 focus 失效问题。
实操建议：
- 小屏下把
display: block，内部flex改为flex-direction: column - 用
max-width而非min-width写断点，比如@media (max-width: 768px)更符合移动优先逻辑 - 如果用了
控制菜单显隐，确保的for属性和 id 匹配，否则点击无效 - 测试真机：iOS Safari 对
position: fixed+transform组合有渲染延迟，悬停类名切换要加will-change: transform
别忽略可访问性，横排导航的键盘焦点和语义不能丢
只顾视觉横排，容易漏掉 tabindex、role 或焦点轮廓（outline），导致屏幕阅读器无法识别导航结构或键盘用户卡死。
性能影响不大，但合规性和实际体验落差极大。
实操建议：
-
aria-label，比如aria-label="主菜单"，否则 VoiceOver 只读“导航”二字 - 每个
保持自然 tab 顺序，不要用tabindex="1"手动干预 - 移除
outline: none时，必须提供等效的焦点样式，例如&:focus { outline: 2px solid #007bff; } - 如果横排项用了图标字体或 SVG，加
aria-hidden="true"避免重复朗读
flex 横排本身简单，真正复杂的是小屏折叠逻辑、键盘操作流、以及不同屏幕尺寸下 padding 和 font-size 的协同缩放——这些地方改一行 CSS，可能让整个导航在某台设备上完全不可用。