CSS如何实现步进器进度条等分布局 按百分比展示激活边框宽度

核心使用Flex布局实现步骤项自动等分宽度，无需手动计算百分比即可适配不同步骤数量，修改后的代码如下：

完整CSS代码 #

/* 父容器占满全宽，开启Flex布局 */
.steps {
  display: flex;
  width: 100%;
}

.inline-flex {
  /* flex:1 表示所有子项平分父容器剩余宽度 */
  flex: 1;
  /* 可根据需求调整内边距控制文字和边框的间距 */
  padding: 8px 0;
  border-bottom: 2px solid black;
  /* 文字对齐可根据需求调整为left/center/right */
  text-align: left;
}

.active {
  border-bottom: 2px solid blue;
}

HTML代码无需修改 #

<div class="steps">
  <div class="inline-flex active">Registration</div>
  <div class="inline-flex">Basic Information</div>
  <div class="inline-flex">Professional Information</div>
  <div class="inline-flex">Others</div>
</div>

效果说明 #

• 父容器.steps默认占满100%宽度，无论有多少个步骤项，都会自动等分总宽度，4个步骤时每个项占25%，5个步骤时每个占20%，无需手动调整样式。
• 给前N个步骤项加.active类时，蓝色高亮边框总宽度自动对应N/总步骤数的比例，完全匹配需求：仅第一步激活时蓝色占25%，前两步激活时占50%，以此类推。

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