最稳妥的垂直导航栏HTML结构是用<nav>包裹<ul><li><a></a></li></ul>，语义清晰、无障碍友好，嵌套下拉菜单需用子<ul>并添加aria-haspopup="true"。
垂直导航栏的 HTML 结构怎么写才不踩坑
直接用 <nav> 包住 <ul> + <li> 是最稳妥的起点，语义清晰、屏幕阅读器友好，也方便后续加 ARIA 属性。别用 <div> 堆砌，否则 JS 操作或无障碍测试时容易漏掉焦点顺序或角色声明。
常见错误是把链接直接塞进 <nav> 里没套列表——这样既难对齐，又没法用 :nth-child() 精确控制某一项样式。
-
<nav>内必须有明确的导航意图，比如包含多个<a>或带role="menu"的结构 - 每个菜单项用
<li>包裹<a>，不要省略<li>（否则display: block后 margin/padding 行为不一致） - 如果含下拉项，子菜单用嵌套
<ul>，且父<li>加aria-haspopup="true"
CSS 实现垂直对齐的关键属性组合
靠 display: flex 或 display: grid 都能实现，但实际项目中优先选 flex：兼容性好、调试直观、hover 动画更可控。别迷信 grid，除非你真需要二维布局（比如图标+文字+徽标三列对齐）。
核心不是“怎么竖起来”，而是“怎么让高度/间距/悬停反馈稳定”。很多页面一滚动就错位，根源在没重置默认 ul 的 margin 和 padding。
立即学习“前端免费学习笔记（深入）”；
- 必须重置：
ul { margin: 0; padding: 0; list-style: none; } - 垂直排列用
flex-direction: column，别依赖writing-mode（IE 支持差，且影响文本方向） - 每项高度统一用
min-height而非height，避免文字换行后撑开错位 - 悬停背景色建议用
background-color+transition: background-color 0.2s，别用box-shadow模拟高亮——滚动时易闪烁
移动端折叠菜单的触发逻辑怎么写才可靠
纯 CSS 的 :checked + <input type="checkbox"> 方案足够轻量，不用 JS 就能切换展开/收起，适合内容静态、交互简单的场景。但要注意：它无法监听外部点击关闭（比如点空白处收起），这点常被忽略。
如果需要更灵活的控制（比如路由变化时自动收起），就得上 JS，但别直接操作 style.display ——推荐切 class，用 nav-open 控制 max-height + overflow，动画才平滑。
- CSS 方案里，
<input>必须放在<nav>外层，且用for关联label，否则 iOS Safari 点击无响应 - JS 方案中，绑定
click事件时记得用event.stopPropagation()防止冒泡到 document 导致误关 - 折叠状态要同步更新
aria-expanded和aria-hidden，否则 VoiceOver 用户无法感知当前状态
图标和文字对齐不齐？检查这三处像素级细节
图标靠 <img> 或 inline SVG 插入时，默认会和文字基线对齐，导致看起来“悬浮”或“下沉”。这不是 bug，是浏览器按规范渲染的结果。
真正有效的解法不是调 vertical-align 猜数值，而是统一用 flex 容器约束单行内容，并显式定义对齐方式。
- 给每个
<li>设display: flex; align-items: center;，图标和文字自然居中 - SVG 图标记得加
width/height，否则在不同缩放比例下尺寸飘移 - 文字行高设为
line-height: 1，再配合padding控制整体高度，比依赖font-size+line-height组合更稳
垂直导航栏最难的从来不是“做出来”，而是“在各种缩放、字体设置、辅助技术环境下保持可用”。多测几次 125% 缩放 + Windows 高对比模式，比多写两行 CSS 更管用。
