时间轴必须用而非或，每个时间项用，日期用，主线用::before绘制并设position: relative，圆点用transform: translatex(-50%)居中，移动端转水平滚动，深色模式需兼容。
用 <ol></ol> 而不是 <div> 包时间点<p>时间轴本质是有序事件流，<code><ol></ol> 是唯一语义正确的容器。用 <div> 或 <code><ul></ul> 会导致读屏器无法识别顺序、打印错乱、SEO 折损——这不是风格偏好，是硬性可访问性要求。
每个时间项必须用 <li>，日期必须用 <time datetime="2024-03-15">2024年3月</time>，datetime 属性必须是 ISO 8601 格式（如 2024-03-15 或 2024-03-15T14:30），否则浏览器无法解析为机器可读时间。
- 别关掉
<ol></ol>默认序号再手动加圆点——语义和视觉分离会破坏可访问性 - 如真不需要数字，用
list-style: none，而不是改成<ul></ul> -
<time></time>在 IE11 里正常显示，但 Safari 旧版本可能触发伪元素闪动，上线前必须验
<ol>::before</ol> 画主线时必须配 position: relative
主线是一条贯穿始终的竖线，画在 <ol></ol> 上最省性能——只渲染一次。但漏掉 position: relative 是最常见的翻车点：没有它，::before 的 top/bottom 会相对于最近的定位祖先（可能是 ），导致竖线错位或消失。
推荐写法：
.timeline {
position: relative;
padding-left: 48px; /* 预留圆点+间隙 */
}
.timeline::before {
content: "";
position: absolute;
left: 20px;
top: 0;
bottom: 0;
width: 2px;
background: #e0e0e0;
}
- 别用
border-left代替 —— 它会撑开父容器宽度，且无法控制起止位置（比如想让线从第二项开始） - 移动端建议把垂直轴转为水平滚动：
overflow-x: auto+white-space: nowrap，比强行折叠更易读 - 深色模式兼容要加：
@media (prefers-color-scheme: dark)和@media (forced-colors: active)
<li>::after</li> 画圆点必须用 transform: translateX(-50%)
圆点要“钉”在主线中点，不是左贴线也不是右贴线，靠 transform: translateX(-50%) 把定位原点从左上角拉到中心。如果只设 left: 20px，小屏下缩放或字体变化时圆点就会漂移。
示例：
.timeline li {
position: relative;
padding: 16px 0;
}
.timeline li::after {
content: "";
position: absolute;
left: 20px;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 12px;
height: 12px;
border-radius: 50%;
background: white;
border: 2px solid #007cba;
}
- 内容区用
margin-left: 48px推开，别用padding-left—— 后者遇到内联元素或 flex 子项容易高度计算出错 - 圆点尺寸别用
rem单位，小屏下缩得太小看不清；固定px更稳妥 - 避免给
<li>加display: flex或position: absolute，否则<time></time>的机器可读性会打折扣
左右交替布局别用 class 切换，用 :nth-child(odd) 和 :nth-child(even)
用 CSS 选择器控制左右交替，比在 HTML 里手动加 class="left"/class="right" 更可靠、更易维护。一旦新增或删减节点，class 就容易错位。
示例：
.timeline li:nth-child(odd) {
text-align: right;
padding-right: 60px;
}
.timeline li:nth-child(even) {
text-align: left;
padding-left: 60px;
}
- 不要只改
text-align，还要同步调整padding-left/padding-right，否则文字会贴边或溢出 - 移动端建议直接取消交替，统一居左或居中——小屏下左右切换反而增加认知负担
- 如果内容含图片或复杂结构，
padding值需按实际宽度微调，不能全靠估算
真正难的不是画线，是让圆点不漂、主线不崩、语义不丢、小屏不糊——这些细节在基础示例里常被省略，但上线前必须一条条验。
