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