最稳导航栏写法是 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 默认不折行。

立即学习“前端免费学习笔记（深入）”；

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 父容器（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 后又用 JS show()，会导致 FOUC 和 SSR 不一致

事情说清了就结束。导航栏看着简单，但键盘可访问性、响应式边界、语义结构这三点，随便漏一个，后面改起来都比重写还费劲。