HTML垂直时间线结构_HTML流程步骤展示方法-html教程-PHP中文网

ol 是最稳妥的 html 结构选择，因其天然带序号、可访问性好、css 选中精准；需扁平结构、关键样式绑定 ol、用伪元素绘制主线与圆点、移动端改水平滚动、全程使用相对单位确保适配。

html垂直时间线结构_html流程步骤展示方法

纯 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）上：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

主线用 .timeline::before 绘制，避免每个 li 都渲染一次线
圆点用 li::after，配合 position: relative 在 li 上定位，确保不随文字换行偏移
左右交替靠 li:nth-child(odd) 控制 text-align: right 和 padding-right，别写 .left/.right class

移动端水平滚动比折叠更可靠

小屏强行把左右布局压成单列，文字挤在一起很难读。更可行的做法是：

用 @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 显式声明