仅使用 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 width为calc(200% - 21px);。根据项目数量更改父级的类：https://jsfiddle.net/bortao/buw28o53/