CSS垂直菜单分隔线制作教程

• 正确做法是用 :not(:last-child) 或更兼容的 :last-child 反向控制：只给非末项设边框
• 推荐写法：li:not(:last-child) { border-bottom: 1px solid #ddd; }
• 如果要兼容 IE8 及更老浏览器，改用 li { border-bottom: 1px solid #ddd; } li:last-child { border-bottom: none; }
• 注意：:last-child 匹配的是父容器中最后一个子元素，确保你的菜单项是连续的
• ，中间没插
  或注释

分隔线高度/颜色和文字对不齐

边框默认从元素内容盒（content box）底部起算，而文字基线在行高中间，视觉上容易显得“悬空”或“压字”。这不是 bug，是盒模型的自然表现。

• 用 box-sizing: border-box 改变计算方式，让 padding 和 border 包含在设定高度内，布局更可控
• 若菜单项有 padding，优先把分隔线放在 padding-bottom 位置，而不是靠 border-bottom——比如设置 padding-bottom: 12px; margin-bottom: 1px;，再用 border-bottom 就容易错位
• 颜色别用纯黑或死灰，#e0e0e0 比 #ccc 更柔和，也更不容易抢文字焦点

响应式下垂直菜单变成水平时分隔线乱了

横向菜单里还留着 border-bottom，线条就横在文字下方，既不美观也不符合习惯。这时候不能靠媒体查询里反复覆盖 border-bottom，容易漏写或冲突。

• 把分隔逻辑抽离到独立类名，比如 .menu--divider，只在垂直场景下启用它
• 水平菜单用 border-right 或 margin-right 做分隔，和 border-bottom 解耦
• 更稳妥的做法：垂直布局用 flex-direction: column + gap: 1px 替代 border-bottom，现代浏览器支持好，且自动跳过最后一项间隙
• 检查 flex 容器是否设置了 align-items: stretch（默认值），否则 gap 可能不生效

用 CSS 变量统一管理分隔线样式

当项目里多个菜单都要一致的分隔线，硬编码颜色、粗细、间距，后期改起来痛苦。变量不是炫技，是减少重复判断的成本。

• 在 :root 定义：--menu-divider-color: #e0e0e0;、--menu-divider-height: 1px;
• 使用时：li:not(:last-child) { border-bottom: var(--menu-divider-height) solid var(--menu-divider-color); }
• 如果某处需要临时加粗分隔线，直接覆盖变量：.menu--important { --menu-divider-height: 2px; }，不用新增选择器
• 注意：CSS 变量不支持 IE，如需兼容，得 fallback 到传统声明，或用预处理器变量替代

真正麻烦的不是写一行 border-bottom，而是当设计改三次分隔线、菜单结构变两次、还要适配暗色模式时，你得翻多少个文件去同步修改。变量和语义化类名，省的是维护时的心智负担。

今天关于《CSS垂直菜单分隔线制作教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！