list-style-type: none 必须为 ul、ol、li 分别设置，因其不继承；需用 list-style: none 统一重置，并配合逻辑属性清空缩进，再手动重建层级缩进。
list-style-type: none 不能只写在 ul 上
很多人以为给 ul 加 list-style-type: none 就能彻底去掉列表点，结果发现子列表（比如嵌套的 ul 或 ol）里点还在。这是因为该属性不继承，每个列表容器都得单独设。
实操建议：
- 对所有可能用到的列表元素统一重置：
ul, ol, li都加list-style: none（list-style是简写，比只写list-style-type更稳妥） - 如果用了自定义标记（比如伪元素
::before），记得同时清掉原生标记，否则会叠加显示 - 注意
menu、dir这类已废弃但仍有渲染行为的标签，也建议一并包含在重置范围内
margin 和 padding 不是“清零”就完事
不同浏览器对 ul 和 ol 的默认 margin 和 padding 差异很大：Chrome 给 ul 加 padding-left: 40px，Firefox 可能是 padding-inline-start，Safari 对 ol 还额外加 margin-block-start。只写 margin: 0; padding: 0; 在某些场景下仍会漏掉逻辑方向上的偏移。
实操建议：
- 优先使用逻辑属性：
margin-inline-start: 0、padding-inline-start: 0，兼容现代布局（尤其是 RTL 页面） - 若需兼容旧浏览器，保留传统写法的同时补上
padding-left: 0和margin-left: 0，但注意不要用!important破坏后续样式覆盖能力 - 别忽略
li自身的上下间距——有些 UI 框架会给li加margin-bottom，这时光清空父容器没用
reset 后内容缩进丢失怎么办
清掉 padding-inline-start 后，列表项文字会紧贴左边，失去视觉层级感。这不是 bug，而是重置的必然结果。你需要主动重建缩进，而不是依赖浏览器默认。
实操建议：
- 用
padding-inline-start或margin-inline-start手动控制缩进量，比如ul ul { padding-inline-start: 1.5em; } - 避免用固定像素值（如
20px），优先用em或rem保持与字体大小联动 - 如果项目用了 CSS-in-JS 或原子类（如 Tailwind），检查是否已有类似
ps-4的缩进工具类被意外覆盖
遇到 display: contents 的列表项要特别小心
当 li 设置了 display: contents，它会脱离文档流，此时它的 list-style 行为变得不可预测——部分浏览器下 list-style: none 失效，点又会冒出来。
实操建议：
- 只要用了
display: contents，必须在父级ul或ol上加list-style: none，且确保没有其他样式（比如来自 reset 库）在之后重新设回list-style-type: disc - 更稳妥的做法是：改用
display: block+margin模拟结构，或者直接放弃display: contents改用 Flex/Grid 布局 - 调试时用浏览器开发者工具的「Computed」面板，逐层看
list-style最终计算值，别只信「Styles」里的声明
重置列表样式看着简单，真正落地时最麻烦的是浏览器差异叠加自定义布局带来的隐性冲突。特别是 display: contents 和逻辑属性混用时，表现可能完全不符合直觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
