ol 是最稳妥的 HTML 结构选择，因其天然带序号、可访问性好、CSS 选中精准；需扁平结构、关键样式绑定 ol、用伪元素绘制主线与圆点、移动端改水平滚动、全程使用相对单位确保适配。
纯 CSS 实现垂直时间轴，ol 是最稳妥的 HTML 结构选择，不是因为“语义正确”这种虚话，而是它天然带序号、可访问性好、CSS 选中精准——比如 :nth-child(odd) 能稳定命中第 1、3、5 个事件，不会被中间插入的辅助 div 打乱。
为什么不用 div 套 div 写时间轴
常见错误是写成：<div class="timeline"><div class="item">...</div><div class="item">...</div></div>。问题在于：
-
.item没有结构层级关系，加动画或“当前进行中”状态时，.timeline .item.active很难精准控制哪个该高亮 - 屏幕阅读器无法识别这是有序事件流，
aria-live或role="list"补救成本高 - 后期想加自动编号（如“第1步”“第2步”），得靠 JS 或额外伪元素，而
ol默认就支持counter-reset和counter-increment
ol 的正确用法与关键 CSS 绑定点
结构必须扁平，每个 li 直接包裹时间标记和内容，不要嵌套 section 或 article：
<ol class="timeline">
<li>
<time datetime="2025-03-15">2025年3月</time>
<div class="timeline-content">需求评审完成</div>
</li>
<li>
<time datetime="2025-04-22">2025年4月</time>
<div class="timeline-content">前端开发启动</div>
</li>
</ol>
关键 CSS 必须绑定在 .timeline（即 ol）上：
立即学习“前端免费学习笔记（深入）”；
- 主线用
.timeline::before绘制，避免每个li都渲染一次线 - 圆点用
li::after，配合position: relative在li上定位，确保不随文字换行偏移 - 左右交替靠
li:nth-child(odd)控制text-align: right和padding-right，别写.left/.rightclass
移动端水平滚动比折叠更可靠
小屏强行把左右布局压成单列，文字挤在一起很难读。更可行的做法是：
- 用
@media (max-width: 768px)把.timeline设为white-space: nowrap+overflow-x: auto -
li设为display: inline-block，宽度固定（如min-width: 240px） - 禁用
li::after圆点的左右偏移逻辑，统一居中；主线从垂直改为水平（::before改为height: 1px） - 避免用
scroll-snap-type，iOS Safari 对inline-block容器支持不稳定，宁可用touch-action: pan-x显式声明
真正难的不是画出那条线，而是让时间点和文字在字体缩放、系统字号调整、深色模式切换时都不错位——所有定位都得基于相对单位（em、rem）和伪元素，别碰 top/left 的像素值。
