必须用<ol>。时间轴本质是「有序事件流」，<ol>天然携带语义、支持reversed属性、屏幕阅读器可读、打印时序号不丢；用<div>会导致无障碍失效、SEO弱化、缩放后节点错位。
纵向时间轴该用 <ol> 还是 <div>？
必须用 <ol>。时间轴本质是「有序事件流」，<ol> 天然携带语义、支持 reversed 属性、屏幕阅读器可读、打印时序号不丢。用 <div> 堆砌会导致无障碍失效、SEO 弱化、缩放后节点错位——尤其在 IE11 或 zoom=125% 场景下，伪元素竖线直接消失。
常见错误包括：
- 给
<ol>设list-style: none后不提供文本 fallback，纯命令行或终端访问时完全丢失顺序 - 把日期写成纯文本，没套
<time datetime="2024-03-15">，导致 JS 无法可靠解析、日历提示失效 - 用
border-left给<ol>加主线，结果每个<li>左侧多出 1px 边框，悬停时圆点左右抖动
横向时间轴为什么总要加 overflow-x: auto？
因为横向布局天然受限于视口宽度，用户需要左右滑动浏览完整流程（比如注册步骤、服务阶段），硬塞进固定宽容器只会截断内容或触发意外换行。
关键实操点：
立即学习“前端免费学习笔记（深入）”；
-
.timeline必须设display: flex+overflow-x: auto，不能只靠white-space: nowrap - 每个时间节点（
<li>或<div class="step">）需设flex-shrink: 0，否则在小屏下被压缩变形 - 避免在节点内用
width: 100%+padding，这会让实际宽度超限，加剧横向溢出 - 移动端若不想滚动，可改用媒体查询切换为垂直堆叠：
@media (max-width: 768px) { .timeline { flex-direction: column; } }
::before 画竖线 vs border-left 的像素级差异
用 ::before 是唯一能稳定居中、不干扰文档流的方案；border-left 是最常踩的坑——它属于盒模型边框，会参与计算、影响 left 定位、且在缩放/高DPI屏下易出现半像素模糊或偏移。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
正确写法核心三句：
-
<ol class="timeline">上设position: relative，为伪元素提供定位上下文 -
.timeline::before：设content: ""、position: absolute、left: 50%、transform: translateX(-50%)、width: 2px、height: 100% - 每个
<li>设position: relative，其::after圆点用top: 50%+transform: translateY(-50%)垂直居中
漏掉 position: relative 或写错 transform 方向（比如误用 translateX 做垂直居中），圆点就会卡在文字第一行末尾。
响应式断点里重置竖线位置为什么不能只改 left？
小屏下把纵向时间轴转为横向横线+上下堆叠，不是简单调 left: 0，而是整个逻辑重构：主线从“垂直贯穿”变成“顶部横贯”，节点从“左右分布”变成“上下居中”，内容块从“并列”变成“单列流式”。
典型错误写法：@media (max-width: 768px) { .timeline::before { left: 0; } } —— 这只会让竖线贴左，内容仍按双列挤在一起，造成严重超宽和横向滚动条。
真正有效的重置应包含：
-
.timeline::before改为top: 0、left: 0、width: 100%、height: 2px -
.timeline-item切换flex-direction: column -
.timeline-time, .timeline-content设width: 100%+text-align: center - 移除所有
padding-left/padding-right对称控制，改用margin-top分隔
横向滚动条的根源从来不是“线没缩好”，而是水平方向内容总宽 > 100%，这点在任何断点里都成立——检查每层嵌套的 width、padding、white-space 组合，比调伪元素参数重要得多。
