list-style: none 未消除留白是因为 ul/ol 默认 padding-left 约40px，需重置 ul, ol { padding: 0; }；list-style-position: inside 与 float 冲突致序号遮挡；flex 布局下 li 变为弹性容器使 list-style 失效；list-style 复合属性顺序错误（如 url() 位置错）导致图像不显示。
list-style: none 为什么还留白？
不是 list-style: none 没生效，而是 ul 或 ol 自身的 padding-left 还在——浏览器默认给无序/有序列表加了约 40px 左内边距，用来安放序号。删掉样式不等于删掉这个空间。
常见错误现象：明明写了 list-style: none，但 li 文字还是缩进一大截，左侧空着。
- 直接重置
ul, ol { padding: 0; }即可清除留白（推荐） - 如果只清
li的margin或padding，没用——问题不在li，而在父级ul - 慎用通配符重置（如
* { padding: 0; }），它会把ul的默认padding-left一并干掉，但你未必意识到这是“留白”的来源
list-style-position: inside 为什么序号被遮住或错位？
这不是 bug，是渲染逻辑使然：inside 把序号画进 li 的内容盒内部，一旦 li 里有 float 元素（比如图标、缩略图），它们脱离文档流，就会和序号抢占同一块区域，导致重叠、裁切甚至“消失”。
典型表现：序号还在，但被浮动子元素盖住；或文字顶到最左边，序号挤出可视区。
- 最快解法：删掉
list-style-position: inside，回归默认的outside - 若必须用
inside，需同时满足三个条件：li设display: flow-root（创建 BFC 包裹浮动）、li有足够宽度、手动加padding-left: 1.5em预留序号空间 - Firefox 对
inside的行高处理最保守，序号容易“下沉”，跨浏览器一致性差
flex 布局下 list-style 失效的根本原因
display: flex 会让 li 变成弹性容器，此时它不再按传统列表项渲染，list-style 直接被忽略——不是样式写错了，是 display 类型变了，语义和渲染上下文都断了。
常见错误：给 li 加 display: flex 后发现圆点没了，然后疯狂调 list-style-position，徒劳。
- 真正有效的做法：把
display: flex上移到ul，让整个列表横向排列，li保持默认display: list-item，序号自然保留 - 如果非要每个
li内部用 flex 排版（比如图标+文字+对勾），就别依赖原生序号，改用伪元素::before手动插入，完全可控 - 现代方案更推荐：用
ul+display: flex+gap控制间距，序号由list-style-type管理，布局与样式解耦
自定义 list-style-image 不显示的顺序陷阱
list-style 是复合属性，值顺序错一个，图像就加载失败。比如写成 list-style: url(arrow.svg) disc，浏览器会把 url() 当作 list-style-type 解析，结果当成无效类型丢弃，图像自然不出现。
正确写法必须保留三项占位，哪怕某项用默认值：类型、位置、图像，缺一不可。
- 标准顺序：
list-style: disc inside url(arrow.svg) - 任意一项省略就用浏览器默认值（
disc/outside/none），但位置占位不能跳过 - 团队协作时建议拆开写：
list-style-type: disc;、list-style-position: inside;、list-style-image: url(arrow.svg);，避免隐式覆盖 - SVG 图像优先，尺寸控制在 16×16px–24×24px，太大容易撑破行高
真正容易被忽略的是：所有“序号不显示”“留白不对”“图标不见”的问题，表面是 list-style 属性没起作用，根子往往在父容器的 BFC 是否健全、ul 的 padding-left 是否被意外清空、或者 li 的 display 类型是否已被 flex/grid 覆盖。调样式前，先看结构是否还“认得自己是个列表”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
