html - 将圆形进度线添加到进度条

Question

我目前正在尝试编写进度条：

.create-progress-bar {
    padding: 0 !important;
    margin: 25px 0;
    display: flex;
}

.create-progress-bar li {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    position: relative;
    width: 33.3333333333%;
}

.create-progress-bar .step-inner-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.create-progress-bar li span.step-title {
    text-transform: uppercase;
    font-weight: 600;
}

.create-progress-bar li span.step-icon {
    font-size: 22px;
    padding: 18px;
    border: 3px solid;
    border-radius: 100%;
    margin-bottom: 6px;
    font-weight: 600;
    width: 26px;
    text-align: center;
}

.create-progress-bar li:first-child {
    align-items: flex-start;
}

.create-progress-bar li:nth-child(2) {
    align-items: center;
}

.create-progress-bar li:last-child {
    align-items: flex-end;
}

.create-progress-bar li::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background: #666666;
    border-radius: 3px;
    top: 31px;
    left: -50%;
    z-index: -1;
}

<ul class="create-progress-bar">
    <li class="active">
        <span class="step-inner-wrapper">
            <span class="step-icon">✔&lt;/span>
            <span class="step-title">Create</span>
        </span>
    </li>
    <li>
        <span class="step-inner-wrapper">
            <span class="step-icon">✔&lt;/span>
            <span class="step-title">Check</span>
        </span>
    </li>
    <li>
        <span class="step-inner-wrapper">
            <span class="step-icon">✔&lt;/span>
            <span class="step-title">Done</span>
        </span>
    </li>
</ul>

现在我的问题是我无法在每个元素之间设置进度条样式。active根据每个li元素中的类，它应该如下所示：

有没有人知道如何完成这项工作？

标签： htmlcss

Answer 1

所以我完全改变了你的 CSS 并对你的 HTML 结构做了一些小的改动。这是我的小提琴：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.progress-bar {
  display: flex;
  width: 100%;
  justify-content: space-around;
  flex-flow: row;
  align-items: center;
  max-width: calc(100% - 40px);
  margin: 0 auto;
}

.progress-bar>li:first-child {
  width: auto;
}

.progress-bar>li:first-child .line {
  display: none;
}

.progress-bar>li.active .tick {
  border-color: red;
  color: red;
}

.progress-bar>li.active .line {
  background: red;
}

.progress-bar>li {
  display: flex;
  flex-flow: row;
  width: 100%;
  align-items: center;
}

.tick {
  border-radius: 100%;
  border: 5px solid black;
  height: 30px;
  width: 30px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  position: relative;
}

.tick>span {
  position: absolute;
  top: 70px;
}

.line {
  width: 100%;
  height: 5px;
  display: block;
  background: black;
  margin: 0 15px;
}

<ul class="progress-bar">
  <li class="active">
    <div class="line"></div>
    <div class="tick">
      ✔&lt;span>CREATE</span>
    </div>
  </li>
  <li>
    <div class="line"></div>
    <div class="tick">
      ✔&lt;span>CHECK</span>
    </div>
  </li>
  <li>
    <div class="line"></div>
    <div class="tick">
      ✔&lt;span>DONE</span>
    </div>
  </li>
</ul>

您会看到我删除了使用伪类的方法，例如::after, 并添加了 a div.line。在 CSS 中，我删除了第一个进度行display: none而不是删除div标记，因为它更易于动态使用，因为您不必关心在添加内容时删除第一行。但你也可以像这里一样删除它：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.progress-bar {
  display: flex;
  width: 100%;
  justify-content: space-around;
  flex-flow: row;
  align-items: center;
  max-width: calc(100% - 40px);
  margin: 0 auto;
}

.progress-bar>li:first-child {
  width: auto;
}

.progress-bar>li.active .tick {
  border-color: red;
  color: red;
}

.progress-bar>li.active .line {
  background: red;
}

.progress-bar>li {
  display: flex;
  flex-flow: row;
  width: 100%;
  align-items: center;
}

.tick {
  border-radius: 100%;
  border: 5px solid black;
  height: 30px;
  width: 30px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  position: relative;
}

.tick>span {
  position: absolute;
  top: 70px;
}

.line {
  width: 100%;
  height: 5px;
  display: block;
  background: black;
  margin: 0 15px;
}

<ul class="progress-bar">
  <li class="active">
    <div class="tick">
      ✔&lt;span>CREATE</span>
    </div>
  </li>
  <li>
    <div class="line"></div>
    <div class="tick">
      ✔&lt;span>CHECK</span>
    </div>
  </li>
  <li>
    <div class="line"></div>
    <div class="tick">
      ✔&lt;span>DONE</span>
    </div>
  </li>
</ul>

---

编辑#1

根据评论，这是一个带有软连字符的版本：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.progress-bar {
  display: flex;
  width: 100%;
  justify-content: space-around;
  flex-flow: row;
  align-items: center;
  max-width: calc(100% - 40px);
  margin: 0 auto;
}

.progress-bar>li:first-child {
  width: auto;
}

.progress-bar>li.active .tick {
  border-color: red;
  color: red;
}

.progress-bar>li.active .line {
  background: red;
}

.progress-bar>li {
  display: flex;
  flex-flow: row;
  width: 100%;
  align-items: center;
}

.tick {
  border-radius: 100%;
  border: 5px solid black;
  height: 30px;
  width: 30px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  position: relative;
}

.tick>span {
  position: absolute;
  top: 70px;
  max-width: 100px;
  text-align: center;
}

.line {
  width: 100%;
  height: 5px;
  display: block;
  background: black;
  margin: 0 15px;
}

<ul class="progress-bar">
  <li class="active">
    <div class="tick">
      ✔&lt;span>CREATE&shy;VERY&shy;LONG&shy;TEXT</span>
    </div>
  </li>
  <li>
    <div class="line"></div>
    <div class="tick">
      ✔&lt;span>CHECK</span>
    </div>
  </li>
  <li>
    <div class="line"></div>
    <div class="tick">
      ✔&lt;span>DONE</span>
    </div>
  </li>
</ul>

你理论上可以使用hyphens: auto. 但这严重缺乏浏览器支持，正如可以在此处看到的那样。

如果您不想要-破折号，请使用word-wrap: break-word;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.progress-bar {
  display: flex;
  width: 100%;
  justify-content: space-around;
  flex-flow: row;
  align-items: center;
  max-width: calc(100% - 40px);
  margin: 0 auto;
}

.progress-bar>li:first-child {
  width: auto;
}

.progress-bar>li.active .tick {
  border-color: red;
  color: red;
}

.progress-bar>li.active .line {
  background: red;
}

.progress-bar>li {
  display: flex;
  flex-flow: row;
  width: 100%;
  align-items: center;
}

.tick {
  border-radius: 100%;
  border: 5px solid black;
  height: 30px;
  width: 30px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  position: relative;
}

.tick>span {
  position: absolute;
  top: 70px;
  max-width: 100px;
  text-align: center;
  word-wrap: break-word;
}

.line {
  width: 100%;
  height: 5px;
  display: block;
  background: black;
  margin: 0 15px;
}

<ul class="progress-bar">
  <li class="active">
    <div class="tick">
      ✔&lt;span>CREATEVERYLONGTEXT</span>
    </div>
  </li>
  <li>
    <div class="line"></div>
    <div class="tick">
      ✔&lt;span>CHECK</span>
    </div>
  </li>
  <li>
    <div class="line"></div>
    <div class="tick">
      ✔&lt;span>DONE</span>
    </div>
  </li>
</ul>