有序列表整体居中需设ol { width: fit-content; margin-inline: auto; }，并确保li { text-align: left; }；不可仅对设text-align，因其为行内元素，须由块级父容器控制对齐。
有序列表整体居中，但链接文字左对齐
直接给 加 text-align: center 会让编号和链接文字都居中，破坏默认的项目符号对齐逻辑——编号会飘到行中，链接文本也会被强制居中，失去可读性。
正确做法是让整个 的内容（含链接）自然左对齐。关键在控制容器宽度和外边距：
-
ol必须设width: fit-content（或固定值如400px），否则margin-inline: auto无效 - 加
margin-inline: auto实现容器级居中（比margin: 0 auto更语义清晰，且兼容现代浏览器） -
li内部用text-align: left显式声明，避免链接继承父级居中样式 - 若链接是
标签，建议加display: inline-block或保留默认行为，无需额外包裹
为什么不能只对 标签用 text-align: center
text-align 是**块级父容器**的属性，作用于其内部的行内内容。单独给 设置 text-align: center 没有效果，因为 默认是行内元素，不产生块格式化上下文。
常见错误现象：li a { text-align: center; } 完全不生效；或者误写成 a { text-align: center; }，结果整页所有链接都被影响。
真正起作用的写法只能是：父容器（比如 li 或 ol）设 text-align，且该容器必须是块级、有布局上下文。
兼容性与 fallback 方案
margin-inline: auto 在 Chrome 69+、Firefox 63+、Safari 12.1+、Edge 79+ 中稳定支持。若需兼容 IE11 或旧版 Safari，退回传统写法：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 把
margin-inline: auto换成margin: 0 auto - 确保
ol有明确width（不能是100%），且父容器不是flex或grid - 避免在
ol上设display: inline-block，否则需额外处理父容器的text-align: center来居中它本身
注意：不要用 flex 包裹 ol 后再用 justify-content: center ——这会让 ol 失去默认的块流行为，编号缩进、list-style-position 等可能异常。
超链接颜色与继承问题
有序列表里的链接常因颜色继承混乱而显得突兀。例如 ol li a 默认蓝色，但父级 li 设了 color: #333，链接却不继承。
根本原因是 有用户代理样式表（UA stylesheet）定义的 color，优先级高于普通继承。解决方法只有显式覆盖：
- 写
ol li a { color: inherit; }，强制继承父级文字色 - 避免用
!important，它会干扰后续主题切换或 dark mode 适配 - 如果链接带下划线影响排版，可加
text-decoration: none，但需配合hover状态恢复以保可访问性
最易被忽略的是：当 ol 被居中后，若内容过长换行，第二行文本仍会严格左对齐——这是正确行为，不是 bug。别试图用 text-align: justify 修复，那会让阅读节奏断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
