直接删掉 list-style-position: inside 改用 outside 可解决90%序号“消失”问题,因 inside 使序号画入 li 内容盒内,与浮动元素重叠或被裁切;根本原因是 ul 缺失默认 padding-left(约40px)及 bfc 不足。

直接删掉 list-style-position: inside,换成默认的 outside,90% 的序号“消失”问题当场解决。
为什么 list-style-position: inside 会让序号“不见”
不是样式没生效,是序号被画进了 li 的内容盒内部,而浮动子元素(比如图标、缩略图)已脱离文档流,导致序号和文字重叠、错位,甚至被裁出可视区。更关键的是:浏览器根本不会在浮动 li 的外边距区域渲染序号——那块地方它直接跳过了。
ul 的 padding-left 被清空才是真凶
通配符重置(如 * { padding: 0; })会干掉 ul 默认的 padding-left(通常约 40px)。项目符号不画在文字里,而是依赖这段左内边距提供的“画布空间”。没了它,序号就挤到容器边缘外,视觉上等于消失。
一款AI工具,主要用于在主代理响应前,并行运行Kimi K2.5和GPT 5.3 Codex,注入双方观点以增强认知多样性,适合需要提升相关任务效率的用户。
-
ul, ol { padding-left: 2rem; }是最直接的修复,推荐值2rem(≈32px),兼顾缩放与字体差异 - 子列表需单独声明:
ul ul, ol ol { padding-left: 1.5rem; },不能靠继承 - 别用
margin-left替代——它作用于整个ul块外部,对序号定位无效
非要保留 inside?那就必须稳住 BFC
序号是否可见,表面看是 list-style-position 或 padding-left 的问题,根因其实是父容器有没有建立可靠的块格式化上下文(BFC)。浮动只是诱因,BFC 缺失才是序号“失踪”的底层逻辑。
- 给
li加display: flow-root(比overflow: hidden语义更清晰),包裹内部浮动子元素 -
li必须有足够宽度容纳序号 + 内容,避免设width: fit-content或被浮动压缩 - 配合
padding-left: 1.5em手动预留序号空间,否则文字会顶到序号上
真正容易被忽略的是:你调来调去的 list-style-position 和 padding,其实都是在给 BFC 缺失打补丁。一旦开始用 float 布局列表,问题就不是“怎么修”,而是“为什么非要用”。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










