全响应式progress bar布局问题求助及移动端适配需求

问题描述 #

需要实现一个全响应式进度条，移除.progress-bar的固定宽度后，进度条线条与星星图标出现分离问题；同时希望在移动端将进度条线条切换为垂直方向。

固定宽度时正常显示效果：

设置width: auto后的异常显示：

解决方案 #

核心优化思路 #

1. 抛弃固定宽度与硬编码的线条定位，改用Flexbox弹性布局自动分配空间，实现自适应的进度条线条
2. 通过媒体查询，在移动端切换Flex布局方向，将水平线条改为垂直方向，适配小屏显示

修改后的完整代码 #

CSS 代码

.progress-bar {
  display: flex;
  margin: 40px 0;
  width: 100%; /* 替换固定宽度，自适应父容器 */
}

.progress-bar .step {
  flex: 1; /* 每个步骤均分可用宽度 */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative; /* 为线条伪元素提供定位基准 */
}

.progress-bar .step .bullet {
  height: 25px;
  width: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2; /* 确保星星在线条上方 */
  background-color: #fff; /* 覆盖线条，避免线条穿过星星 */
}

/* 自适应步骤间线条：替代原硬编码的绝对定位 */
.progress-bar .step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 12px; /* 与星星垂直居中对齐 */
  left: 50%;
  width: 100%;
  height: 3px;
  background-color: #C1C1C1;
  z-index: 1;
}

.active-bullet {
  z-index: 3;
}

.active-check {
  border-bottom: 2px solid black;
  padding: 2px;
  margin-top: 8px; /* 调整文本与星星的间距 */
}

/* 移动端垂直布局适配 */
@media (max-width: 768px) {
  .progress-bar {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 40px; /* 为垂直线条预留空间 */
  }

  .progress-bar .step {
    flex-direction: row; /* 步骤内星星与文本横向排列 */
    align-items: center;
    margin: 16px 0;
  }

  .progress-bar .step:not(:last-child)::after {
    top: 50%;
    left: -30px; /* 调整线条到星星左侧 */
    width: 30px;
    height: 100%; /* 改为垂直线条 */
    transform: translateY(-50%);
  }

  .active-check {
    margin-left: 12px; /* 文本与星星的横向间距 */
    margin-top: 0;
  }
}

HTML 代码（移除内联样式，保持结构整洁）

<div class="progress-bar">
  <div class="step">
    <div class="bullet active-bullet">
      <img src="star-pb-active.svg" alt="已完成">
    </div>
    <div class="check active-check">已下单</div>
  </div>
  <div class="step">
    <div class="bullet">
      <img src="star-pb.svg" alt="未完成">
    </div>
    <div class="check">制作珠宝</div>
  </div>
  <div class="step">
    <div class="bullet">
      <img src="star-pb.svg" alt="未完成">
    </div>
    <div class="check">包装与质检</div>
  </div>
  <div class="step">
    <div class="bullet">
      <img src="star-pb.svg" alt="未完成">
    </div>
    <div class="check">已发货</div>
  </div>
  <div class="step">
    <div class="bullet">
      <img src="star-pb.svg" alt="未完成">
    </div>
    <div class="check">预计送达</div>
  </div>
</div>

关键修改说明 #

• 移除固定宽度：将.progress-bar的width:750px改为width:100%，让进度条自适应父容器宽度
• 自适应线条：用.step的伪元素替代原硬编码的绝对定位线条，利用flex:1均分空间，线条自动填充步骤间空隙
• 层级优化：给.bullet添加白色背景和更高z-index，避免线条穿过星星图标
• 移动端适配：通过媒体查询切换Flex方向，将水平线条改为垂直方向，同时调整步骤内元素排列方式，优化小屏体验

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