最稳导航栏写法是 ul+li，语义正确、屏幕阅读器友好、样式灵活；须用 flex 布局替代 float，确保键盘焦点、响应式和可访问性统一。
导航栏用 ul + li 是最稳的写法
因为语义正确、屏幕阅读器友好、样式控制灵活，且不会像 div 堆砌那样容易漏掉列表含义。浏览器默认给 ul 的缩进和圆点其实无关紧要——list-style: none 一行就能清掉。
常见错误是直接用一堆 span 或 div 拼导航，结果键盘 Tab 焦点乱跳、SEO 无结构、后期加下拉菜单时 DOM 层级崩坏。
- 必须用
ul包裹li，每个li里放一个a -
a标签必须有href（哪怕只是#），否则无法被键盘聚焦或被辅助技术识别 - 别给
li设固定宽度，优先用display: flex或inline-block布局
display: flex 比 float 更可靠
float 做导航栏老出问题：父容器塌陷、换行错位、IE 兼容性差；而 flex 一行对齐、居中简单、响应式伸缩自然。
但要注意：如果导航项文字长度差异大，又没设 flex-wrap: wrap，小屏下会溢出或横向滚动——这不是 bug，是 flex 默认不折行。
立即学习“前端免费学习笔记（深入）”；
- 父容器（
ul）加display: flex; align-items: center; - 子项（
li）加margin-right: 1rem比用gap兼容性更好（gap在 flex 中 IE 完全不支持） - 最后一个
li用:last-child { margin-right: 0; }避免多余空白
下划线高亮、背景色激活态别只靠 :hover
用户用键盘 Tab 切换时，:focus 必须和 :hover 表现一致，否则体验割裂。而且别忘了移动端没有 hover，纯靠点击触发，所以 :active 和 .active 类也要同步处理。
常见坑是写了 a:hover { background: #007bff; } 却忘了 a:focus { outline: 2px solid #007bff; }，结果键盘用户看不见当前焦点在哪。
- 统一用
a:hover, a:focus { background: #007bff; color: white; } - 当前页面对应的导航项加
class="active"，并写a.active { background: #0056b3; } - 如果要去掉默认蓝色虚线框，用
outline: none但必须补上等效视觉反馈（比如边框或阴影）
响应式折叠菜单得手动控制显隐，CSS 无法自动判断内容是否溢出
媒体查询只能按视口宽度切，不能按导航项数量或宽度切。所以「超出就变汉堡」这事，纯 CSS 做不了——要么 JS 测量容器宽度，要么提前约定最多显示 5 项，其余塞进 details 或下拉菜单。
别信“用 overflow: hidden + text-overflow: ellipsis 把菜单缩成…”，那不是导航，是遮羞布。
- 小屏下用
@media (max-width: 768px)把ul设为flex-direction: column或隐藏，再用input[type="checkbox"] + label + ul模拟开关 - JS 方案推荐监听
window.resize并对比ul.scrollWidth > ul.clientWidth，真溢出再显示汉堡按钮 - 别在
@media里写display: none后又用 JSshow()，会导致 FOUC 和 SSR 不一致
