html - 等距圆圈，文本之间有线条，圆圈下方居中文本

Question

这几乎就是我想做的事情:

问题是我希望文本在黄色下方居中，但如果我这样做，我不知道如何保持黄色点之间的线条相互连接。这里有一个 Codepen 链接，指向所有代码和 CSS，用于生成上面的内容:https://codepen.io/anon/pen/GdwyyK

HTML:

<div class="container">
  <ul class="status-bar">
    <li>
      <div>1</div>
      <div>foo</div>
    </li>
    <li>
      <div>2</div>
      <div>bar</div>
    </li>
    <li>
      <div>3</div>
      <div>baz</div>
    </li>
    <li>
      <div>4</div>
      <div>qux</div>
    </li>
    <li>
      <div>5</div>
      <div>blahblahblah</div>
    </li>
  </ul>

</div>

SCSS:

.container {
  max-width: 100vw;
  width: 950px;
  background-color: lightgrey;
  height: 800px;
}

ul.status-bar {
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
  display: flex;
  padding: 0 15px;

  li {
    display: flex;
    align-items: center;
    position: relative;

    &:not(:last-child) {
      flex: auto;
      // background-color: purple;
    }

    &:not(:last-child):after {
      content: "";
      border-bottom: 1px solid blue;
      flex: 1;
    }
  }

  li div {
    &:not(:last-child) {
      padding: 5px;
      height: 25px;
      width: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 50%;
      border: 1px solid black;
      background-color: yellow;
      position: relative;
    }

    &:last-child {
      position: absolute;
      bottom: -20px;

      text-align: center;
    }
  }
}

如何将“foo”、“bar”等相对于它们下面的点居中，并且点之间的线仍然相连？

Answer 1

我会采取不同的方式，就像这样会减少代码。

body {
  margin: 0;
}

.container {
  max-width: 100vw;
  width: 950px;
  background-color: lightgrey;
  padding:5px;
  box-sizing:border-box;
}

ul.status-bar {
  padding: 0;
  margin:0;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  /*I used gradient for the line*/
  background: linear-gradient(blue, blue)50% 20px/100% 2px no-repeat;
}

ul.status-bar li {
  display: flex;
  align-items: center;
  flex-direction: column;
}

ul.status-bar li div:not(:last-child) {
  padding: 5px;
  height: 25px;
  width: 25px;
  text-align: center;
  line-height: 25px;
  border-radius: 50%;
  border: 1px solid black;
  background-color: yellow;
}


/*Hide the overflow of the gradient*/

ul.status-bar li:first-child {
  background: linear-gradient(to left, transparent 50%, lightgrey 0);
}

ul.status-bar li:last-child {
  background: linear-gradient(to right, transparent 50%, lightgrey 0);
}

<div class="container">
  <ul class="status-bar">
    <li>
      <div>1</div>
      <div>foo</div>
    </li>
    <li>
      <div>2</div>
      <div>b</div>
    </li>
    <li>
      <div>3</div>
      <div>bazjkhj j</div>
    </li>
    <li>
      <div>4</div>
      <div>qx</div>
    </li>
    <li>
      <div>5</div>
      <div>blahblahblah</div>
    </li>
  </ul>

</div>