垂直导航必须用 ul+li+a 结构：ul 天然垂直堆叠，li 是语义唯一导航项容器，a 提供可跳转、可聚焦、可被屏幕阅读器识别的交互能力；禁用 div 堆砌或 a 直塞 nav，须设 display: block、width: 100%、box-sizing: border-box，并用 aria-current="page" 标识当前页。
垂直导航必须用 ul + li + a 结构
不是“可以”，是必须——ul 天然垂直堆叠，li 是语义上唯一的“导航项”容器，a 提供可跳转、可聚焦、可被屏幕阅读器识别的交互能力。用 div 堆砌或直接把 a 塞进 nav 会破坏 tab 键顺序、SEO 权重和键盘操作流。
常见错误：
- 写成
<nav><a>首页</a><a>关于</a></nav>：失去列表语义，无法被辅助技术归类为“一组导航项” - 用
ol替代ul：序号无业务意义，纯属视觉干扰 - 给每个
li单独加 class 如nav-item-home：增加冗余选择器，阻碍样式复用
nav a 必须设 display: block 和 width: 100%
默认 a 是行内元素，点击热区仅覆盖文字区域。用户在菜单项空白处悬停或点击时，容易失效或误触相邻项。
关键组合：
-
display: block：让a具备块级行为（可设宽高、padding） -
width: 100%：确保它撑满父li的可用宽度 -
box-sizing: border-box（推荐加）：避免padding导致内容溢出或宽度计算偏差
漏掉 width: 100% 的典型表现：li 有 padding-left 时，a 只占文字宽度，右侧大片空白不可点击。
激活态必须用 aria-current="page"，而非仅靠 class="active"
class="active" 只对 CSS 有效，但屏幕阅读器、浏览器历史 API、自动化测试工具无法感知。只有 aria-current="page" 才能明确告诉辅助技术“这是当前页面对应的导航项”。
实操要点：
- 服务端渲染时，直接在对应
a上写aria-current="page" - 前端路由切换后，JS 应同时移除旧项的该属性、添加到新项（不要只操作
class） - CSS 中可这样匹配：
nav a[aria-current="page"] { background-color: #007bff; color: white; }
只依赖 class 的后果：视障用户无法获知“你现在在哪”，Lighthouse 可访问性审计直接扣分。
垂直间距优先用 gap，慎用 justify-content: space-between
当菜单项数量固定且容器高度可控时，justify-content: space-between 确实能顶头贴尾；但只要项数动态变化（比如权限控制隐藏某项），它就会导致末项被截断或顶部留白失控。
更稳妥的做法：
- 容器设
display: flex; flex-direction: column; gap: 0.8rem; -
gap不依赖总高度，增删项自动重排，首尾自然留空 - 兼容性注意：IE 完全不支持
gap，若需兼容，fallback 方案是给li:not(:first-child)加margin-top，但必须配合nav ul的margin: 0防止叠加
最容易被忽略的一点：别在 flex 容器上同时设 padding 和 gap——padding 会压缩内部可用空间，使 gap 实际间距小于预期，且难以调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
