border导致li换行是因为box-sizing: content-box下width不包含border，三列33.33%加border后总宽超100%；应全局设html{box-sizing:border-box;}， , ::before , *::after{box-sizing:inherit;}。
加 border 就换行，不是列表项写错了，是盒模型没对齐——width 默认不包含 border，三个 width: 33.33% 的 li 各加 1px 边框，实际总宽就超了 100%，浏览器只能把它往下挤。
为什么 border 会让 li 换行？
默认 box-sizing: content-box，你写的 width: 33.33% 只算内容区；border: 1px solid 和可能存在的 padding 都额外往外加。三列相加就是 33.33% × 3 + 6px，轻松突破父容器宽度。DevTools 的 Computed 面板里看 box-sizing 值，如果是 content-box，问题就在这儿。
- 常见触发场景：浮动布局中用
float: left排列li、Bootstrap 的.col-4类嵌套在ul里、或display: inline-block栅格 - 第三方 UI 库（比如某些版本的 Ant Design 或 Element Plus）可能全局重置了
box-sizing，但漏掉::before/::after，导致清除浮动的伪元素仍按content-box计算，悄悄撑开布局 -
outline不占空间，但开发时误用outline测试边框，会掩盖真实问题
全局启用 box-sizing: border-box 必须写全
只写 * { box-sizing: border-box; } 是不够的——它不覆盖伪元素，而很多布局修复（如 clearfix）依赖 ::after，一旦它还是 content-box，就会出错。
- 正确写法（必须包含三部分）：
html { box-sizing: border-box; }*, *::before, *::after { box-sizing: inherit; } - 老项目若已引入 Bootstrap 4+，它只写了
* { box-sizing: border-box; }，需手动补上伪元素规则 - 微信 X5 内核（v3.7 以下）对伪元素重置支持不稳定，可加兜底：
ul, li, li::before, li::after { box-sizing: border-box; }
局部修复时别依赖继承，显式声明才可靠
哪怕全局设了 border-box，某些场景下仍得单独加：表单控件（input、textarea）被 UA 样式强制设为 content-box；CSS-in-JS 库服务端渲染顺序错乱，首屏样式未注入；或用了 !important 覆盖的框架样式。
- 浮动列表必须给每个
li显式加：li { box-sizing: border-box; } - 如果还带
padding，用calc()扣减：4 列带 12px 间隔 →width: calc((100% - 36px) / 4) -
margin不受box-sizing影响，若换行由margin: 0 10px引起，得改用padding或手动从width里扣减
换行没解决？检查这些隐藏点
box-sizing: border-box 解决了尺寸膨胀，但不等于布局自动完美。内容区变窄后，新瓶颈立刻浮现：
- 长单词或连续无空格文本（如 URL、token）在缩窄内容区里更容易溢出，需配合
overflow-wrap: break-word（推荐）或word-break: break-all（慎用） - Flex 布局中，
min-width: auto（默认值）可能阻止子项收缩，导致无法适应border占用的空间 - 浮动父容器若有
padding却没设box-sizing: border-box，其width: 100%子项仍会溢出 - 真正容易被忽略的不是
border本身，而是min-content计算、父容器余量是否足够——这些都得同步重验
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
