如何实现AntDesign Timeline左对齐且支持两侧展示文本不固定宽度

API 探路者

2026-10-7

解决方案（纯CSS，自适应宽度）

要实现Timeline两侧展示文本、时间轴不居中、宽度自适应的需求，可通过覆盖Ant Design默认样式实现，无需固定宽度：

先将Timeline的mode属性设置为alternate（该模式原生支持两侧内容展示），并添加自定义类名区分样式：

<Timeline mode="alternate" className="custom-timeline">
  <Timeline.Item label="Date 1">Test</Timeline.Item>
  <Timeline.Item label="Date 2">Some information</Timeline.Item>
  <Timeline.Item label="Date 3">More information</Timeline.Item>
</Timeline>

新增如下CSS样式：

/* 容器宽度由内容自动撑开 */
.custom-timeline {
  width: fit-content;
}
/* 用grid布局实现三列自适应：左侧内容、时间轴区域、右侧内容 */
.custom-timeline .ant-timeline-item {
  display: grid;
  grid-template-columns: auto 20px auto;
  gap: 8px;
  align-items: start;
}
/* 重置默认的绝对定位样式 */
.custom-timeline .ant-timeline-item-head,
.custom-timeline .ant-timeline-item-tail {
  position: relative;
  left: 0;
  top: 4px;
}
/* 调整时间轴竖线位置，和圆点居中对齐 */
.custom-timeline .ant-timeline-item-tail {
  left: 7px;
  height: calc(100% - 4px);
}
/* 重置内容区默认样式，宽度自适应 */
.custom-timeline .ant-timeline-item-content {
  position: static;
  width: auto;
  padding: 0;
}