正确做法是用 li:not(:last-child) { border-bottom: 1px solid #ddd; } 精准控制非末项加线；兼容IE8则用 li { border-bottom: 1px solid #ddd; } li:last-child { border-bottom: none; }。
垂直菜单每项加下划线但最后一项不要
用 border-bottom 给菜单项加线最直接，但默认会多出一条冗余线。关键不是“怎么加”，而是“怎么精准去掉最后一项的线”。
常见错误是手动给最后一个 <li> 加 border-bottom: none —— 一旦菜单动态生成或顺序变化，就失效。
- 正确做法是用
: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匹配的是父容器中最后一个子元素，确保你的菜单项是连续的<li>，中间没插<div>或注释
分隔线高度/颜色和文字对不齐
边框默认从元素内容盒（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，而是当设计改三次分隔线、菜单结构变两次、还要适配暗色模式时，你得翻多少个文件去同步修改。变量和语义化类名，省的是维护时的心智负担。
