结论是应使用 li:not(:last-child) 配合正 margin 控制间距，而非对所有项设负 margin；因 margin-right: -12px 会使最后一项右边界溢出父容器，若父容器 overflow: hidden 则被裁剪而“消失”，且负 margin 仅做视觉偏移、不改变文档流结构。
直接说结论：别对最后一个子项“消除”外边距，而是只给非末尾项加外边距——用 li:not(:last-child) 配合正 margin，比硬套负 margin 更安全、更可维护。
为什么 margin-right: -12px 会让最后一项“消失”
这不是 bug，是负 margin 的行为本质：它把元素往右（或左）硬拉，不区分位置。给所有 li 加 margin-right: -12px，最后一项的右边界就超出了父容器可视区域。如果父容器设了 overflow: hidden，它就被裁掉；没设，可能触发横向滚动条。
常见错误现象包括：
- 列表在小屏下突然少一项
- 开发者工具里元素存在，但视觉不可见
- 打印预览时内容错位或缺失
li:not(:last-child) 是最稳的写法
它不依赖列表长度，也不关心是否浮动或 flex 排序，只看 DOM 结构中“是不是最后一个子元素”。只要不是最后一个，就命中。
实操建议：
- 统一给所有
li设margin-right: 12px，再用li:not(:last-child) { margin-right: 12px; }—— 等价于只保留最后一项有右距（其实更推荐直接只写这一句） - 若需微调边框重叠，改用
li:not(:last-child) { margin-right: -1px; }，仅影响连接处，不影响整体布局流 - 注意：
:not(:last-child)和:not(:last-of-type)不同：前者认“最后一个子元素”，后者认“同类型标签里的最后一个”，混排时要选对
Flex 布局下负 margin 几乎无效
Flex 容器会约束子项边界，margin-left: -10px 很可能只是轻微偏移，不会溢出。此时强行用负值，反而容易和 gap 叠加导致间距翻倍或错位。
正确做法是：
- 优先用
gap: 12px控制子项间距 - 兼容旧浏览器时，用
@supports (gap: 0)降级到.item:not(:last-child) { margin-right: 12px; } - 边框合并需求，改用
box-shadow: 0 0 0 1px #ccc模拟单边线，hover 时切换更稳定
真正容易被忽略的是：负 margin 不是语义化工具，它不改变文档流结构，只做视觉偏移。一旦父容器没开 BFC（比如没设 display: flow-root），就可能引发塌陷、错位、打印异常——这些在开发阶段往往看不出来，上线后才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
