步進進度條 - 響應式 css

Question

我想做一個響應式步進器，其中步進器之間的線路連接到每個步驟。 目前只能使用 4 步，一旦超過或少於 4 步，它就會變得沒有響應。

這是jsfiddle ，目前可通過 4 個步驟操作。

  .bullet.completed::after {
      content: '';
      position: absolute;
      bottom: 10px;
      height: 1px;
      width: calc(133% - 21px);
      background-color: #000;
      margin-left: 7px;  
  }

我試圖改變這部分，但它似乎不起作用。 感謝提前！

 #stepProgressBar { display: flex; justify-content: space-between; align-items: flex-end; width: 90%; margin: 0 auto; margin-bottom: 40px; }.step { text-align: center; width: 20%; position: relative; }.step-text { margin-bottom: 10px; color: #000; }.bullet { border: 1px solid #000; height: 20px; width: 20px; color: #000; display: inline-block; transition: background-color 500ms; line-height: 20px; }.bullet.completed { color: white; background-color: #000; }.bullet.completed::after { content: ''; position: absolute; bottom: 10px; height: 1px; width: calc(133% - 21px); background-color: #000; margin-left: 7px; } /* Base styles and helper stuff */.hidden { display: none; } button { padding: 5px 10px; border: 1px solid black; transition: 250ms background-color; } button:hover { cursor: pointer; background-color: black; color: white; } button:disabled:hover { opacity: 0.6; cursor: not-allowed; }.text-center { text-align: center; }.container { max-width: 100%; margin: 0 auto; margin-top: 20px; padding: 40px; }

 <div class="container"> <div id="stepProgressBar"> <div class="step"> <p class="step-text">Super Duper Long Title</p> <div class="bullet completed">1</div> </div> <div class="step"> <p class="step-text">Long Long Title</p> <div class="bullet completed">2</div> </div> <div class="step"> <p class="step-text">Loooong Title</p> <div class="bullet completed">3</div> </div> <div class="step"> <p class="step-text">Loooong Title</p> <div class="bullet">4</div> </div> </div> </div>

Answer 1

將.bullet.completed::after修改為display:flex ，並將其width設置為100%減去修改后的margin-left值，該值等於.bullet的寬度（ 20px ）：

.bullet.completed::after {
  content: '';
  position: absolute;
  bottom: 10px;
  height: 1px;
  display:flex;            /* Added */
  width:calc(100% - 20px); /* Modified */
  background-color: #000;
  margin-left: 20px;       /* Modified */
}

這里有七個步驟：

 const previousBtn = document.getElementById('previousBtn'); const nextBtn = document.getElementById('nextBtn'); const finishBtn = document.getElementById('finishBtn'); const content = document.getElementById('content'); const bullets = [...document.querySelectorAll('.bullet')]; const MAX_STEPS = 7; let currentStep = 1; nextBtn.addEventListener('click', () => { bullets[currentStep - 1].classList.add('completed'); currentStep += 1; previousBtn.disabled = false; if (currentStep === MAX_STEPS) { nextBtn.disabled = true; finishBtn.disabled = false; } content.innerText = `Step Number ${currentStep}`; }); previousBtn.addEventListener('click', () => { bullets[currentStep - 2].classList.remove('completed'); currentStep -= 1; nextBtn.disabled = false; finishBtn.disabled = true; if (currentStep === 1) { previousBtn.disabled = true; } content.innerText = `Step Number ${currentStep}`; }); finishBtn.addEventListener('click', () => { location.reload(); });

 #stepProgressBar { display: flex; justify-content: space-between; align-items: flex-end; width: 90%; margin: 0 auto; margin-bottom: 40px; }.step { text-align: center; width: 20%; position: relative; }.step-text { margin-bottom: 10px; color: #000; }.bullet { border: 1px solid #000; height: 20px; width: 20px; color: #000; display: inline-block; transition: background-color 500ms; line-height: 20px; }.bullet.completed { color: white; background-color: #000; }.bullet.completed::after { content: ''; position: absolute; bottom: 10px; height: 1px; width:calc(100% - 20px); display:flex; background-color: #000; margin-left: 20px; } /* Base styles and helper stuff */.hidden { display: none; } button { padding: 5px 10px; border: 1px solid black; transition: 250ms background-color; } button:hover { cursor: pointer; background-color: black; color: white; } button:disabled:hover { opacity: 0.6; cursor: not-allowed; }.text-center { text-align: center; }.container { max-width: 100%; margin: 0 auto; margin-top: 20px; padding: 40px; }

 <div class="container"> <div id="stepProgressBar"> <div class="step"> <p class="step-text">Super Duper Long Title</p> <div class="bullet">1</div> </div> <div class="step"> <p class="step-text">Long Long Title</p> <div class="bullet">2</div> </div> <div class="step"> <p class="step-text">Loooong Title</p> <div class="bullet">3</div> </div> <div class="step"> <p class="step-text">Title</p> <div class="bullet ">4</div> </div> <div class="step"> <p class="step-text">Title</p> <div class="bullet ">5</div> </div> <div class="step"> <p class="step-text">Title</p> <div class="bullet ">6</div> </div> <div class="step"> <p class="step-text">Title</p> <div class="bullet ">7</div> </div> </div> <div id="main"> <p id="content" class="text-center">Step Number 1</p> <button id="previousBtn" class="hidden"></button> <button id="nextBtn">Next</button> <button id="finishBtn" class="hidden">Finish</button> </div> </div>