ol列表行高必须设在li上,因li默认块级且形成行框;设在ol上常无效,主因父容器font-size:0或li被改为inline/flex导致line-height失效。

ol列表的行高该设在哪个元素上
必须设在 ol 或 li 上,不能设在 ol li::marker 或内联文本容器(如 span)上——line-height 只对形成行框的块级或行内块容器生效,而 li 默认是块级元素,天然支持。
为什么直接给 ol 设 line-height 有时没反应
常见原因是父容器用了 font-size: 0(比如为了清除 inline 元素间隙),导致无单位 line-height 计算结果为 0;或者 li 被意外设为 display: inline / flex,脱离了文本流,line-height 失效。
- 用浏览器开发者工具检查 “Computed” 面板里的
line-height实际值,不是只看 “Styles” 里有没有写 - 确保
li保持display: block(默认值),别被其他规则覆盖 - 如果用了
counter-reset+counter-increment自定义序号,line-height仍要作用于li,不是伪元素
单行 vs 多行 li 的行高控制差异
单行 li:设 line-height 等于容器高度可垂直居中;多行 li:line-height 只控制每行间距,整体高度由内容撑开,此时需配合 min-height 或 padding 控制视觉节奏。
- 单行场景推荐:
li { line-height: 1.6; }(无单位,响应式友好) - 固定像素控高(如后台列表):
li { line-height: 40px; },但注意用户放大字体时可能重叠 - 含换行、图片或子元素的
li:放弃纯line-height,改用padding: 12px 0;或display: flex; align-items: center;
ol 序号和文字不对齐怎么办
这不是 line-height 的问题,而是 vertical-align 和 list-style-position 的组合影响。默认序号在左侧,文字基线与序号底部对齐,容易看起来“偏下”。
立即学习“前端免费学习笔记(深入)”;
- 加
list-style-position: inside;把序号放进内容区,再配合line-height统一控制 - 更稳方案:用
display: flex;拆解序号和内容,例如li { display: flex; align-items: center; },然后用::before生成序号 - 避免用
margin-top或transform微调序号位置——它不参与行框计算,容易在不同字号下错位
line-height 已经不够用了。这时候得跳出传统 ol/li 结构,用语义化但可控的布局替代。



















