使用 CSS 的垂直进度步骤

Question

我有反应组件从火车上打印行程，我需要用这样的垂直线统一圆圈：

我需要统一这些节点（带有垂直条的圆圈）并且正在寻找一个想法。我正在使用 flex 并且使用包含 3 个子组件的 react 组件呈现项目（一个是时间，一个是节点 - 圆圈，另一个是站和实时）。

我必须从头开始编写 css（使用最大的 flexbox 或网格）。

先感谢您。

Answer 1

我的尝试。

我会使用一个无序列表，其中时间和描述是flexbox列表项的子项。使用伪元素（正确堆叠）可以轻松绘制点和垂直线。

.events li { 
  display: flex; 
  color: #999;
}

.events time { 
  position: relative;
  padding: 0 1.5em;  }

.events time::after { 
   content: "";
   position: absolute;
   z-index: 2;
   right: 0;
   top: 0;
   transform: translateX(50%);
   border-radius: 50%;
   background: #fff;
   border: 1px #ccc solid;
   width: .8em;
   height: .8em;
}


.events span {
  padding: 0 1.5em 1.5em 1.5em;
  position: relative;
}

.events span::before {
   content: "";
   position: absolute;
   z-index: 1;
   left: 0;
   height: 100%;
   border-left: 1px #ccc solid;
}

.events strong {
   display: block;
   font-weight: bolder;
}

.events { margin: 1em; width: 50%; }
.events, 
.events *::before, 
.events *::after { box-sizing: border-box; font-family: arial; }

<ul class="events">
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time</span></li>
    
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time</span></li>
  
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time and other text that may span over 2 lines</span></li>
  
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time</span></li>
  
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time</span></li>
  
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time</span></li>
</ul>