ul/ol 左缩进源于浏览器默认 padding-left（chrome 40px、firefox 2.5em），非 margin 或 html 结构所致；仅 list-style: none 无法消除缩进，须配合 margin: 0 和 padding: 0 三者共用才彻底清除。
为什么 ul/ol 总是往左缩进一截
因为浏览器给 ul 和 ol 默认加了 padding-left（Chrome 是 40px，Firefox 是 2.5em），不是 margin，也不是 HTML 结构问题。只设 list-style: none 会去掉圆点或数字，但左边那块空白还在。
必须三者一起清：list-style: none、margin: 0、padding: 0。缺一个都会残留偏移。
ul, ol { list-style: none; margin: 0; padding: 0; }- 如果只想重置某一处（比如导航菜单），避免全局污染，写成
.nav ul { ... }更安全 - Flex 或 Grid 布局下照样要清——
display: flex不会自动覆盖padding-left
怎么换掉默认的 disc 或 decimal
list-style-type 是最直接的控制方式，但它只作用在 ul 或 ol 元素上，不是 li；设在 li 上无效。
- 无序列表常用值：
disc（实心圆，默认）、circle（空心圆）、square（方块）、none - 有序列表常用值：
decimal（1,2,3）、lower-alpha（a,b,c）、upper-roman（I,II,III） - 部分值兼容性有限，比如
lower-greek在 Safari 旧版不显示 - 注意：改完类型后，编号/符号和文字仍可能不对齐，得靠后续调整
padding-left或text-indent
用图片当项目符号要注意什么
list-style-image 看起来简单，但实际容易出错：
- 路径必须正确，相对路径以 CSS 文件位置为基准，不是 HTML 文件
- 图片尺寸没约束，大图会撑开行高，小图又看不清；建议用 16×16 px 的 PNG
- 无法单独调色或缩放，想改颜色就得换图
- 更稳妥的替代方案是关掉默认样式：
list-style: none，再用li::before插入图标或 SVG，可控性高得多
编号和文字基线对不齐怎么办
这是最难调也最容易被忽略的一点。不同字体、line-height、甚至字号变化，都会让 ol 的数字和文字“飘”起来，尤其在用了非系统字体时。
- 先确保
ol和li的line-height一致，避免继承差异 - 用
vertical-align: middle或baseline微调li::marker（现代写法）或li::before的对齐 - Safari 对
::marker支持较晚，生产环境仍需测试 fallback 方案 - 真正耗时间的不是换编号，而是让所有浏览器里数字底部和文字 x-height 对齐——这点常被跳过，直到 QA 提 bug
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
