仅使用 CSS 的响应式步进器

Question

我想制作一个支持任何数字的响应式步进器。我尝试过这个（请参阅下面的代码片段）。

不知何故，4 是适合此脚本的所需数量，任何大于或小于 4 的值都会变得混乱。

参考这个jsfiddle看看，只需3步。有谁知道如何解决这一问题？我需要帮助。提前致谢！

#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;

}

Answer 1

仍然不确定你的期望是什么......所以我用<label>s 和隐藏的复选框做了一个 4 步 Whatchamacallit。向前单击它们，它们就会发生变化。如果向后走，则需要按顺序进行。做出这种行为是为了不存在任何间隙。这种纯 CSS 动态行为可以通过以下方式实现：通用兄弟组合器标签标签[for]属性:checkedCSS伪类justify-content: space-between;演示:root,body {  width: 100%;  height: 100%;  padding: 20px 10px;  font: 400 5vw/1 Consolas, monospace;}main {  display: flex;  justify-content: start;  align-items: center;  overflow: hidden;  margin: 0 30px 0 -30px;}.box {  display: flex;  flex-flow: row nowrap;  justify-content: space-between;  align-items: center;  width: 90%;  height: 5vw;  line-height: 1;  margin: 0 auto;  padding: 0;  background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), rgba(0, 0, 0, 1) calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px));}.s {  position: relative;  display: inline-block;  width: 5vw;  height: 5vw;  margin: 0;  padding: 0;  color: #000;  background: #fff;  outline: 2px solid #000;  text-align: center;}#s1 {  align-self: start;  order: 4;}#s2 {  order: 3;}#s3 {  order: 2;}#s4 {  align-self: end;  order: 1;}.c {  display: none;}.c:checked~.s {  color: #fff;  background: #000;}.c,.s {  cursor: pointer;}<main>  <section class='box'>    <input id='c1' class='c' type='checkbox'>    <label id='s1' class='s' for='c1'>4</label>    <input id='c2' class='c' type='checkbox'>    <label id='s2' class='s' for='c2'>3</label>    <input id='c3' class='c' type='checkbox'>    <label id='s3' class='s' for='c3'>2</label>    <input id='c4' class='c' type='checkbox'>    <label id='s4' class='s' for='c4'>1</label>  </section></main>

Answer 2

对于三个项目，您需要更改.bullet.completed::after&nbsp;width为calc(200% - 21px);。根据项目数量更改父级的类：https://jsfiddle.net/bortao/buw28o53/