简述HTML如何快速搭建响应式顶部水平导航布局

不用JavaScript也能实现响应式顶部导航栏，关键在于语义化结构（nav+ul+li）、桌面端flex布局（justify-content:space-around、flex:0 0 auto、gap控制间距）和移动端checkbox控制显隐（input前置、max-height过渡、父li设position:relative）。

不用 JavaScript 也能做出能点、能收、不闪退的响应式顶部导航栏，关键在三处：结构语义必须用 nav + ul + li，桌面端靠 display: flex 水平铺开，移动端靠 input[type="checkbox"] 控制显隐——漏掉任一环，小屏下就卡死或错位。

为什么必须用 nav + ul + li 而不是 div 堆砌

这不是“写得规范”，而是浏览器和辅助技术依赖这套语义链：nav 告诉读屏器“这是主导航区”，ul 表示一组并列项（屏幕阅读器会报“共 4 个菜单项”），li 必须直接包裹 a，否则下拉菜单的 :hover 或 :checked ~ 选择器会失效。如果用 div 替代，键盘 Tab 顺序错乱、SEO 权重下降、移动端焦点管理失控都是真实踩过的坑。

桌面端 flex 布局怎么写才不翻车

nav ul 设 display: flex 是基础，但容易忽略几个细节：

1. 用 justify-content: space-around 比 space-between 更稳——文字长度不均时两端留白一致，视觉不飘
2. 给每个 li 加 flex: 0 0 auto，禁止缩放；别设 flex-shrink: 1，否则窄屏下文字被压扁甚至换行错乱
3. 间距统一用 gap: 1rem，比给每个 li 加 margin-right 干净，也避开“最后一个要不要清 margin”的纠结
4. IE11 不支持 gap，得退回到 li:not(:last-child) { margin-right: 1rem; }

移动端点击展开为什么非得用 checkbox

想纯 CSS 实现点击展开/收起，唯一可靠方案是 input[type="checkbox"]。常见错误是直接写 div class="hamburger" 配 JS，但 JS 加载失败时菜单永远不可见。正确做法：

1. input 放在 label 前，用 for 关联，确保点击区域 ≥ 44px（iOS 最小触控要求）
2. ul.nav-menu 默认设 max-height: 0; overflow: hidden;，别用 display: none（它无法触发 CSS 过渡）
3. 触发时靠 input:checked ~ .nav-menu 设 max-height: 300px，数值需略大于所有子项总高，否则动画截断；别写死 300px——动态增减项时得预估或交由 JS 补充

真正难的不是写出来，而是让下拉菜单在中英文混排、翻译后字数变化、滚动页面时都不偏移、不闪烁、不被截断——这些细节藏在 position: relative 的父 li、transform: translateY(100%) 替代 top: 100%、以及 iOS 上改用 position: sticky 而非 fixed 里。