如何用HTML、CSS实现二级步骤进度条？布局调整求助

要把步骤b放到步骤c下方，核心是给这两个步骤加一个嵌套容器，通过CSS布局让容器内的元素垂直排列，同时不影响其他步骤的横向结构。

具体修改方案 #

1. 调整HTML结构

给步骤c和b包裹一个独立容器，区分出二级步骤组：

<div class="progress-container">
  <div class="step">步骤a</div>
  <div class="sub-step-group">
    <div class="step">步骤c</div>
    <div class="step sub-step">步骤b</div>
  </div>
  <div class="step">步骤d</div>
</div>

2. 修改CSS布局

给嵌套容器设置垂直方向的flex布局：

.progress-container {
  display: flex;
  justify-content: space-around; /* 保持主步骤横向均匀分布 */
  align-items: flex-start;
  gap: 20px;
}

.sub-step-group {
  display: flex;
  flex-direction: column; /* 让组内元素垂直排列 */
  align-items: center; /* 居中对齐，保证视觉统一 */
}

.sub-step {
  margin-top: 10px; /* 调整二级步骤和上级步骤的间距 */
}

替代方案（Grid布局） #

如果更习惯用Grid，也可以这样设置：

.sub-step-group {
  display: grid;
  place-items: center; /* 同时水平和垂直居中 */
}

关键注意点 #

• 主容器的align-items要设为flex-start，避免所有步骤都以最高元素为基准对齐，确保二级步骤组的顶部和其他步骤对齐。
• 根据实际需求调整gap和margin的值，保证整体视觉协调。

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