CSS如何制作简单的时间轴布局_利用border-left与伪点-css教程-PHP中文网

时间轴需设父容器position: relative以确保子元素定位准确；圆点用::before伪元素配合transform: translatex(-50%)实现水平居中对齐；内容区用margin-left避让竖线和圆点，避免padding-left引发布局问题。

css如何制作简单的时间轴布局_利用border-left与伪点

时间轴主体用 `border-left` 实现，但别忘了设置父容器 `position: relative`

直接给时间轴容器加 border-left: 2px solid #333 是最简方案，但后续所有时间点（.timeline-item）的定位会依赖这个基准线。如果父容器没设 position: relative，子元素用 position: absolute 往左偏移时，可能相对于整个页面或某个祖先定位，导致错位。

常见错误现象：时间点圆点飘到屏幕左侧边缘，或随滚动乱跑。

必须给包裹整个时间轴的外层容器加 position: relative
每个 .timeline-item 设 position: relative 就够用，不需要绝对定位——除非你要做垂直居中对齐
若时间点需响应式缩放，border-left 宽度建议用 px，避免在小屏下变细不可见

伪元素画圆点用 `::before`，注意 `transform: translateX(-50%)` 的作用

圆点本质是时间项左侧的一个小圆，用 ::before 伪元素 + border-radius: 50% 最轻量。关键在于水平居中对齐：圆点默认以左边缘为原点，所以得向左偏移自身宽度一半。

示例代码片段：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.timeline-item::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 2px solid #333;
  border-radius: 50%;
  transform: translateX(-50%);
}

这里 translateX(-50%) 是把圆点再往左推它自身宽度的一半，确保视觉中心正对 border-left。漏掉这句，圆点右边缘才会贴线，看起来偏右。