垂直导航栏必须用flex-direction: column，不能只靠float或display:block；需将nav放入display:flex容器，ul设flex-direction:column，nav设width和flex-shrink:0，用gap替代margin控制间距，并通过外层flex协调nav与main布局。

垂直导航栏必须用 flex-direction: column，不能只靠 float 或 display: block

垂直导航不是“把 li 往下堆”就完事。很多初学者用 float: left 或纯 display: block，结果在响应式场景下错位、高度塌陷、子项无法对齐，甚至和主内容重叠。

真正可控的做法是：把 nav 放进一个页面级 display: flex 容器，再让其内部 ul 明确设为 flex-direction: column。

• nav 自身要设固定宽度（如 width: 200px）并加 flex-shrink: 0，否则在弹性容器中会被压缩变形
• ul 移除默认 padding-left 和 list-style，否则左侧多出空白或圆点
• 别给 li 设 margin-bottom 来控制间距——改用 gap: 8px 更干净，且不会影响首尾项

主内容区域怎么避免被垂直导航遮挡

常见错误是只给 nav 加 position: fixed，却不约束主内容的起始位置，导致文字从导航底下穿出来。

正确做法是用外层 flex 容器统一协调两块区域：

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

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 父容器设 display: flex; min-height: 100vh，保证撑满视口
• nav 和主内容区（比如 main）作为直接子元素，并列放置
• 主内容区加 flex: 1，自动填满剩余宽度；如果需要滚动，再额外加 overflow-y: auto
• 千万别对 main 单独设 margin-left 去“躲开”导航——这在缩放或不同屏幕下极易失效

移动端要不要保留垂直导航？怎么折行或隐藏

垂直导航在小屏上天然占高不占宽，但若菜单项太多（比如 15 个），用户得疯狂滑动，体验反而比水平汉堡菜单差。

判断逻辑应基于设备能力而非单纯宽度：

• 用媒体查询检测 max-width: 768px 时，把整个 nav 设为 display: none
• 同时显示一个 button 触发器，点击后通过 JS 切换 nav 的 display: block 或加类名控制显隐
• 不建议在小屏强行保持垂直布局并设 overflow-y: auto——手指滚动精度低，容易误触
• 如果业务强依赖侧边导航（如后台系统），至少加 touch-action: pan-y 防止横向拖拽冲突

当前页高亮（active）为什么总失效

class="active" 硬编码到每个 HTML 文件里，是最容易崩的方案。路径稍有差异（/about vs /about/）、哈希路由（#!/dashboard）、服务端渲染路径前缀（/zh-CN/products）都会让匹配失败。

真正靠谱的方式只有两种：

• 服务端动态注入：模板引擎（如 EJS、Nunjucks）根据当前请求 URL 渲染对应 active 类
• 前端 JS 匹配：监听 location.pathname 或 location.hash，用 startsWith() 或正则做前缀匹配（比如 /products 应匹配 /products/list 和 /products/detail/123）
• 绝对不要用 == 或 === 全等判断，因为 URL 可能带查询参数或 trailing slash

垂直导航看着简单，但宽度控制、内容避让、高亮逻辑、移动端适配这四点，任何一个没对齐，就会在真实项目里反复返工。