CSS/HTML自定义步骤进度条：拉伸布局与均匀分布实现

问题核心 #

当前基于flex实现的进度条存在两侧多余空白、首尾圆点不贴边、连接线错位问题，需要在保留原有三态样式、兼容2-5个动态步骤项的前提下，实现：

• 步骤项完全填满黄色背景容器，无左右多余空白
• 所有步骤等宽，圆点均匀分布
• 圆点始终在对应步骤文本上方居中
• 首尾圆点贴合容器左右边缘

修复后完整代码 #

CSS代码 #

body{
  background: lightblue;
  width: auto;
  padding: 50px;
}
a{text-decoration: none}

.progress {
    display: flex;
    background: yellow;
    width: auto;
    /* 清除ul默认内边距，消除两侧空白根源 */
    padding: 0;
    margin: 0;
    list-style: none;
}

.progress>li {
    /* 所有步骤项等宽平分容器宽度 */
    flex: 1;
    position: relative;
    list-style: none;
}

.progress>li a{
    text-align: center;
    width: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    text-overflow: ellipsis;
    color: lightgrey;
    display: block;
    overflow: hidden;
    white-space: nowrap;
}

.progress>li .circle {
    border-radius: 50%;
    width: 24px;
    height: 24px;
    background: lightgrey;
    display: block;
    /* 圆点在步骤项内水平居中，自动对齐下方文本 */
    margin: 0 auto .5em;
    position: relative;
    /* 圆点层级高于连接线，避免线穿过圆点 */
    z-index: 2;
}

/* 连接线逻辑优化：仅非最后一个步骤需要画右侧连接线 */
.progress>li:not(:last-child):after {
    display: block;
    position: absolute;
    top: 10px;
    /* 线从当前步骤圆点中心开始 */
    left: 50%;
    /* 线延伸到下一个步骤中心 */
    width: 100%;
    height: 4px;
    content: '';
    background: lightgrey;
    z-index: 1;
}

/* 三态样式保持原有逻辑不变 */
.progress>li.done .circle,
.progress>li.done:after {background: green}
.progress>li.done,
.progress>li.done a{color: green}

.progress>li.busy .circle,
.progress>li.busy:after {background: violet}
.progress>li.busy,
.progress>li.busy a{color: violet}

HTML代码（无需修改，原有结构完全兼容） #

<ul class="progress">
  <li class="done">
    <a href="#" title="More about the First Step">
      <span class="circle"></span>
    Step1</a>
  </li>
  <li class="done">
    <a href="#" title="Afterwards the Second Step">
      <span class="circle"></span>
    Step2</a>
  </li>
  <li class="busy">
    <a href="#" title="This about the current active Step">
      <span class="circle"></span>
    Step3</a>
  </li>
  <li>
    <a href="#" title="Future Next Step">
      <span class="circle"></span>
    Step4</a>
  </li>
  <li>
    <a href="#" title="And the Final Step">
      <span class="circle"></span>
    Step5</a>
  </li>
</ul>

关键修改点说明 #

• 清除ul标签默认自带的内边距，从根源消除左右两侧多余黄色空白
• 替换原有每个圆点挂载两个伪元素画连接线的逻辑，改为仅在非最后一个li上挂载单个伪元素画连接线，不需要单独给首尾项写宽度偏移规则，自动实现首尾圆点贴边、中间连接线对齐
• 保留flex:1规则实现所有步骤项自动等宽，圆点通过margin: 0 auto始终在当前步骤项水平居中，天然对齐下方文本
• 自动兼容2-5个步骤的场景，动态增删li节点不需要额外调整CSS，布局不会崩坏

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