用<ol>语义化结构配合flex布局水平排列<li>，伪元素::after绘制连接线并隐藏最后一项，外层容器设overflow-x:auto实现响应式横滑，移动端用clamp()缩放字体、white-space:nowrap防换行。
怎么用纯 HTML + CSS 实现水平时间轴（timeline）
水平时间轴不是靠某个现成的 timeline 标签——HTML 里压根没有这个标签。你得用语义化结构（比如 <ol> 或 <div>）配合 CSS 控制流向、对齐和连接线。
核心思路是：把每个时间点做成一个 <li> 或 <div>，用 display: flex 或 display: grid 水平铺开，再用伪元素（::before / ::after）画连接线。
- 别用
<ul>默认垂直样式硬改，优先选<ol>（语义更准，时间有顺序） - 连接线建议用
position: absolute+ 父容器position: relative控制，比border或背景图更可控 - 移动端要加
overflow-x: auto和scroll-snap，否则内容挤成一团或截断
CSS 实现水平排列时常见的错位问题
最常踩的坑是：时间点卡片看起来“没对齐”，或者连接线歪了、断了。根本原因通常是盒模型和定位没统一。
- 所有时间点项必须设相同
flex-basis或width，否则flex: 1会按内容撑开，导致间距不均 - 连接线用
::after画在每个项右侧时，记得给最后一项display: none，否则多出一根线 - 如果用了
transform: translateX()做动画或微调，要检查是否触发了will-change或影响父级overflow - IE11 不支持
gap，用margin替代时注意第一个/最后一个项的额外边距
如何让时间轴响应式地适配手机屏幕
水平滚动是手机端唯一靠谱方案，但默认体验很差：用户不知道能横滑、滑不动、文字缩成小点。
立即学习“前端免费学习笔记（深入）”；
- 外层容器加
overflow-x: auto和-webkit-overflow-scrolling: touch（iOS 流畅滚动） - 内部时间点用
white-space: nowrap防止换行，每项用display: inline-block或flex-shrink: 0 - 关键交互提示：加一个细微的左右箭头图标（CSS 绘制即可），或在首尾留空隙暗示可滑动
- 字体大小别写死
px，用rem或clamp(0.875rem, 4vw, 1rem)动态缩放
要不要用 JavaScript 补充交互？什么情况下真需要
纯 CSS 能搞定展示和基础滚动，JS 只在以下场景才值得加：
- 点击某节点自动滚动到视口中心 → 用
element.scrollIntoView({ behavior: 'smooth' }) - 滚动时高亮当前可见项 → 监听
scroll+getBoundingClientRect()判断位置 - 动态加载更多时间点（比如日志分页）→
IntersectionObserver触发请求 - 不要为“鼠标悬停显示详情”上 JS：用
:hover+transition完全够用，且更轻量、可访问性好
真正难的不是画线，而是让时间点在不同宽度下保持视觉节奏一致——连接线长度、文字折行逻辑、焦点状态反馈，这些细节一动就容易失衡。
