序号不对齐的根本原因是html结构不合法或css未匹配生效条件：90%源于li的display被修改或list-style-position使用错误；应确保ul/li嵌套合法，优先用outside+padding-left，避免flex/inline-block破坏list-item特性。
序号不对齐，90% 是 li 的 display 被改了，或者 list-style-position 用错了位置——不是 CSS 写得不够多，而是没对准生效条件。
list-style-position: inside 为什么首行和换行不对齐
用了 list-style-position: inside，结果第一行项目符号顶着文字，第二行文字却从容器左边缘开始，看起来像缩进错乱。这不是渲染 bug，是浏览器把符号当行内内容处理后，自然产生的基线行为。
- 符号被挤进文本流，占据第一行左侧空间；换行后文本回归容器左边界，造成视觉“错位”
- 中文段落、长标题、
line-height小于font-size时尤其明显 - IE11 和旧版 Safari 对
text-indent在li上的支持不一致，手动校准容易失效 - 真正稳妥的做法：放弃
inside，改用list-style-position: outside+ 显式控制ul { padding-left: 2em; }
横向排列列表时序号突然消失或错位
给 ul 加了 display: flex，或给 li 加了 display: inline-block，结果序号没了，或者飘到文字上方/左侧空白处被裁掉。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
list-style-position只在display: list-item下有效；一旦li变成flex或inline-block，符号直接不渲染 - 用
ul { display: flex; }时，必须配li { list-style: none; }，再用::before或background-image模拟序号 - 若坚持用
inline-block，要显式写li { list-style-position: inside; vertical-align: top; }，否则不同字体下基线浮动 - 注意父容器
overflow: hidden可能截掉outside符号——检查 computed styles 确认符号是否被计算但不可见
嵌套列表里子项序号缩进异常
子 ul 里的 li 缩进太深、文字换行后悬空，或者序号和父级不对齐，常见于菜单、大纲、FAQ 展开结构。
- 根本原因是子
ul没包在父li内部，比如写成<ul><li>父项</li></ul> <ul><li>子项</li></ul>—— 浏览器会自动纠错，把第二个ul移出，DOM 结构断裂 - 合法结构只有一种：
<ul><li>父项<ul><li>子项</li></ul> </li></ul>，子ul必须是某个li的直接子元素 - CSS 上别依赖
margin-left模拟嵌套缩进；应统一用ul ul { margin-left: 1.5em; }，并确保父ul有足够padding-left容纳符号 - 超过两层嵌套时，屏幕阅读器导航顺序易乱，建议用
aria-level补充语义，而非仅靠缩进视觉提示
响应式下序号被挤压或截断
小屏设备上，数字序号（尤其是 ol 的 upper-roman 或长编号）贴边、换行错位、甚至被 overflow-x: auto 容器裁掉。
- 别用
text-indent或负margin-left强行拉回序号——这会让可访问性工具读取错乱 - 优先用
padding-inline-start替代padding-left，它随书写方向自动适配，且不受direction影响 - 对
ol，可用counter-reset+::before自定义编号，并设white-space: nowrap防止序号换行 - 移动端慎用
list-style-position: inside，它会压缩文本可用宽度；更稳的是outside+ 增加ul左侧留白
最常被忽略的点：序号对齐问题，往往不是样式没调好，而是 HTML 结构本身就不合法——ul 里塞了 div，li 外挂了 span，或者嵌套层级被浏览器悄悄修正过。动手调 CSS 前，先打开开发者工具看一眼 DOM 树，确认每个 ul 和 li 是否真的按你写的那样嵌套闭合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
