html - 完全响应式进度条

Question

我必须创建一个必须完全响应的进度条。为了响应，我不希望进度条类具有固定宽度，但是当我将 auto 设置为宽度时，如果我给它们自动宽度，进度条线也会与星形分离

固定宽度:好看

宽度自动

首先我该如何解决这个问题，也许有人可以帮助我实现这个进度条，使其在移动设备上也能响应，这样进度条的线就会是垂直的。

.progress-bar {
  width: 750px;
  display: flex;
  margin: 40px 0;
}

.progress-bar .step {
  text-align: center;
  width: 100%;
}

.progress-bar .step .bullet {
  position: relative;
  height: 25px;
  width: 25px;
  display: inline-block;
}

.progress-bar .step:last-child .bullet:before,
.progress-bar .step:last-child .bullet::after {
  display: none;
}

.progress-bar .step .bullet:before,
.progress-bar .step .bullet::after {
  position: absolute;
  content: "";
  height: 3px;
  right: -136px;
  bottom: 11px;
  width: 142px;
  background: #C1C1C1;
}

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

.active-check {
  z-index: 2;
}

<div class="progress-bar">
  <div class="step">

    <div class="bullet active-bullet">
      <img src="star-pb-active.svg">
    </div>
    <div class="check active-check" style="
            border-bottom: 2px solid black;
            padding: 2px;
            DISPLAY: table-cell;
            LEFT: 40px;
            POSITION: relative;
        ">Order placed</div>
  </div>
  <div class="step">

    <div class="bullet">
      <img src="star-pb.svg">
    </div>
    <div class="check">Jewerly Creation</div>
  </div>
  <div class="step">

    <div class="bullet">
      <img src="star-pb.svg">
    </div>
    <div class="check">Packing & Quality Control</div>
  </div>
  <div class="step">

    <div class="bullet">
      <img src="star-pb.svg">
    </div>
    <div class="check">Shipped</div>
  </div>
  <div class="step">

    <div class="bullet">
      <img src="star-pb.svg">
    </div>
    <div class="check">Estimated Delivery</div>
  </div>
</div>

Answer 1

您应该尝试查看 flex-grow property来自 Flexbox。通过将 display: flex 给父级，将 flex-grow: 1 给子级，您应该能够使每一步的大小相同并占用所有的宽度他们的容器。