应优先使用语义正确的 <dl> 替代 <ol> 实现问答编号，通过 dt::before 伪元素结合 CSS 计数器自动编号，并重置默认间距、控制对齐与响应式适配。
用 <ol> 做编号，但默认样式太简陋
浏览器默认的 <ol> 编号是纯数字加点，字号小、颜色灰、间距紧，直接放问答里显得廉价。关键不是“有没有编号”，而是“编号能不能和问题视觉权重匹配”。<ol> 必须配合 CSS 重置，否则 list-style-type 改成字母或罗马数字也没用——因为默认 margin 和 padding 会挤压内容，导致问答文本贴着编号挤在一起。
实操建议：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 先用
ol { padding-left: 0; margin: 1.5rem 0; }清掉默认缩进和外边距 - 编号本身用
ol li::marker单独控制：字体、大小、颜色、右间距（别用margin-right，用content+padding-inline-end更稳） - 如果要圆角背景编号（比如“1”带浅蓝底白字），必须把编号抽出来用伪元素模拟，
<ol type="1">自身不支持背景色
dl + dt/dd 比 ol 更适合问答结构
问答本质是“问题-答案”配对，<dl> 的语义就是定义列表，<dt> 是术语（问题），<dd> 是定义（答案）。它天生支持编号逻辑：你完全可以用 dl dt::before 插入序号，同时保留语义正确性——搜索引擎和读屏器都认这个结构，而硬套 <ol><li><h3>Q</h3><p>A</p></li> 反而破坏层次。
常见错误现象：<dl> 默认上下间距大、<dt> 加粗且无缩进，直接用会显得松散。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 重置
dl { margin: 0; }，dt, dd { margin-block-start: 0; margin-block-end: 0; } - 用
dt::before { content: counter(qa) ". "; counter-increment: qa; }实现自动编号，比写死<dt>1. 为什么…</dt>更可靠 -
dd内容若含段落、列表，记得给dd > *:first-child补上顶部间距，否则答案文字会顶到问题末尾
编号对齐方式影响阅读节奏
左对齐编号（如“1.”靠左，问题文本从同一垂直线开始）最易扫读；但很多人误用 text-align: right 把编号塞到右侧，结果问题文字起始位置飘忽，眼睛得反复找起点。更隐蔽的坑是：用 flex 布局时，align-items: flex-start 没设好，编号和问题文本基线不齐，看着像错位。
实操建议：
- 编号容器（
dt::before或li::marker）用display: inline-block; width: 2em; text-align: right;固定宽度+右对齐，保证所有编号右缘对齐 - 问题文本用
margin-left: 2.5em（略大于编号容器宽度）形成稳定缩进，避免因字号变化导致换行错位 - 禁用
vertical-align随意调整，改用line-height统一控制基线
响应式下编号容易被截断或重叠
小屏幕（比如 iPhone 竖屏）时，如果编号用了固定 width: 2em 但没设 min-width，字号缩小时编号容器塌缩，“10.” 可能被切成“1.”和“0.”两行；或者 dd 内容有长代码块/表格，撑宽容器导致编号被挤到可视区外。
实操建议：
- 编号容器加
min-width: 1.8ch;（ch单位基于 “0” 字宽，比em更稳） -
dd内部长内容统一加overflow-x: auto;和max-width: 100%;，防止横向溢出破坏布局 - 媒体查询里把编号宽度从
2em改成1.6em，同时margin-left对应缩小，保持比例
真正麻烦的是多级嵌套问答——编号层级一深，CSS 计数器容易混乱，这时候宁可拆成多个独立 <dl>，也别硬套 counter-reset 嵌套。
