将圆形的进度线添加到进度条

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">✔</span>
            <span class="step-title">Create</span>
        </span>
    </li>
    <li>
        <span class="step-inner-wrapper">
            <span class="step-icon">✔</span>
            <span class="step-title">Check</span>
        </span>
    </li>
    <li>
        <span class="step-inner-wrapper">
            <span class="step-icon">✔</span>
            <span class="step-title">Done</span>
        </span>
    </li>
</ul>

现在我有一个问题，就是我无法获取每个元素之间样式化的进度条。看起来应该像这样，具体取决于每个active元素中的类li：

有没有人知道如何完成此任务？

Answer 1

因此，我彻底更改了CSS，并对HTML结构进行了一些小的更改。这是我的fiddle：

* {
  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">
      ✔<span>CREATE</span>
    </div>
  </li>
  <li>
    <div class="line"></div>
    <div class="tick">
      ✔<span>CHECK</span>
    </div>
  </li>
  <li>
    <div class="line"></div>
    <div class="tick">
      ✔<span>DONE</span>
    </div>
  </li>
</ul>

您将看到我删除了使用伪类（例如::after）的方法，而是添加了div.line。在CSS中，我使用display: none删除了第一行，而不是删除了div标签，因为它更易于动态使用，因为在添加内容时不必担心删除第一行。但是您也可以像here一样删除它：

* {
  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">
      ✔<span>CREATE</span>
    </div>
  </li>
  <li>
    <div class="line"></div>
    <div class="tick">
      ✔<span>CHECK</span>
    </div>
  </li>
  <li>
    <div class="line"></div>
    <div class="tick">
      ✔<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">
      ✔<span>CREATE&shy;VERY&shy;LONG&shy;TEXT</span>
    </div>
  </li>
  <li>
    <div class="line"></div>
    <div class="tick">
      ✔<span>CHECK</span>
    </div>
  </li>
  <li>
    <div class="line"></div>
    <div class="tick">
      ✔<span>DONE</span>
    </div>
  </li>
</ul>

理论上，您可以使用hyphens: auto。但这here可以看出，它严重缺乏浏览器支持。

如果您不希望-破折号，请使用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">
      ✔<span>CREATEVERYLONGTEXT</span>
    </div>
  </li>
  <li>
    <div class="line"></div>
    <div class="tick">
      ✔<span>CHECK</span>
    </div>
  </li>
  <li>
    <div class="line"></div>
    <div class="tick">
      ✔<span>DONE</span>
    </div>
  </li>
</ul>

Answer 2

您可以使用flexbox和ul { display: flex; align-items: center; justify-content: space-between; list-style-type: none; padding-left: 0; margin-bottom: 50px; } li:not(:first-child) { display: flex; align-items: center; justify-content: center; flex: 1; } li:not(:first-child):before { flex: 1; height: 1px; background: black; content: ''; margin: 0 10px; } li.active .step-inner-wrapper { border-color: red; color: red; } li.active:before { background: red; } .step-inner-wrapper { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border: 1px solid black; border-radius: 50%; position: relative; } .step-title { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 100%); }伪元素来执行此操作。您可以在除第一个li元素之前的每个li元素之前创建线条，如果li具有活动类，则可以更改边框颜色和线条颜色。

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

  <li>
    <span class="step-inner-wrapper">
      <span class="step-icon">✔</span>
    <span class="step-title">Check</span>
    </span>
  </li>

  <li>
    <span class="step-inner-wrapper">
      <span class="step-icon">✔</span>
    <span class="step-title">Done</span>
    </span>
  </li>
</ul>

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

  <li class="active">
    <span class="step-inner-wrapper">
      <span class="step-icon">✔</span>
    <span class="step-title">Check</span>
    </span>
  </li>

  <li class="active">
    <span class="step-inner-wrapper">
      <span class="step-icon">✔</span>
    <span class="step-title">Check</span>
    </span>
  </li>

  <li>
    <span class="step-inner-wrapper">
      <span class="step-icon">✔</span>
    <span class="step-title">Check</span>
    </span>
  </li>

  <li>
    <span class="step-inner-wrapper">
      <span class="step-icon">✔</span>
    <span class="step-title">Done</span>
    </span>
  </li>
</ul>

Navigation.registerComponent('WelcomeComponentScreen', () => (props) => (
  <Provider store={reduxStore}>
    <'WelcomeComponentScreen' {...props} />
  </Provider>
), () => 'WelcomeComponentScreen');