如何在linear progress indicator（线性进度指示器）下方对齐不同阶段？

以下是3种可直接落地的实现方式：

1. 纯CSS Flex布局方案（通用性最高） #

• 外层包裹统一的容器，分为上下两层：上层为进度条轨道，下层为阶段文本容器
• 进度条和阶段文本容器设置相同的width，确保总长度完全对齐
• 阶段文本容器设置display: flex; justify-content: space-between;，自动将所有阶段文本均匀分布在容器内，每个阶段的中心位置天然和进度条上的对应节点对齐
• 进度条的已完成进度通过width百分比控制，节点位置直接对应下层文本的分布位置
• 移动端适配仅需要给外层容器加max-width: 100%即可，无需额外逻辑
  核心代码示例：

.progress-wrapper {
  width: 80%;
  margin: 0 auto;
}
.progress-track {
  height: 4px;
  background: #eee;
  border-radius: 2px;
  position: relative;
  margin-bottom: 12px;
}
.progress-active {
  height: 100%;
  width: 66%; /* 对应已完成2/3阶段，可动态修改 */
  background: #2196F3;
  border-radius: 2px;
}
.steps-text {
  display: flex;
  justify-content: space-between;
  padding: 0 12px; /* 抵消两端文本溢出轨道的边距 */
}
.step-item {
  text-align: center;
  max-width: 60px; /* 防止文本过长挤压布局 */
  font-size: 12px;
}

2. CSS Grid布局方案（适合固定阶段场景） #

• 直接把进度条和阶段文本放在同一个Grid容器内，列数和阶段数量完全一致
• 进度条轨道占满所有列，已完成进度和节点直接对应列的起始位置
• 阶段文本每个占1列，天然实现上下对齐，不需要额外计算间距
  该方案适合阶段数量固定的业务场景，比如固定4步的下单流程，布局稳定性更强，不会因为某段文本长度变化出现偏移。

3. UI组件库方案（快速开发首选） #

主流前端组件库都内置了支持该效果的步骤组件，直接配置参数即可实现：

• React生态：antd的Steps组件设置type="progress"，通过progressDot属性控制节点样式，自动实现文本和进度节点对齐
• Vue生态：Element Plus的Steps组件设置align-center属性，进度条和下方文本默认对齐
• 小程序生态：Vant/Uni UI的步骤组件均支持线性进度+底部文本对齐的配置，无需自定义布局
  如果需要自定义交互，也可以基于组件库的基础样式二次覆盖，开发成本最低。

适配注意事项 #

• 如果阶段文本长度差异过大，不要用space-between布局，改为给每个step-item设置固定宽度百分比，比如3个阶段就每个占33.33%，避免布局偏移
• 动态阶段数量的场景可以用JS计算每个阶段的宽度百分比，赋值给对应节点即可

内容的提问来源于stack exchange，提问作者Apeksh Agarwal