Question

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

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

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

提前谢谢。

Answer 1

我的尝试。

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

Codepen demo

<强>标记

<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>
  ...
</ul>

<强> CSS

.events li { 
  display     : flex; 
}

.events time { 
  position : relative;
  color    : #ccc;
  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;
}

最终结果

Answer 2

可以使用具有边框半径的div绘制圆圈，然后使用两个圆形div来绘制圆圈，并将另一个div突出显示侧边框颜色。

Answer 3

您可以在包装器上使用边框，如下所示：

＆＃13;

.timeline-wrapper {
  margin-left: 1.5rem;
  border-left: 3px solid #ddd;
}
.node {
  padding-left: .5rem;
  padding-bottom: 1.5rem;
  position: relative;
}
.node h3, .node p {
  margin: 0;
}
.node::before {
  content: "";
  width: .5rem;
  height: .5rem;
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 50%;
  position: absolute;
  top: .3rem;
  left: -.5rem;
}

＆＃13;

<div class="timeline-wrapper">
  <div class="node">
    <h3>Title</h3>
    <p>Status / Time</p>
  </div>
  <div class="node">
    <h3>Title</h3>
    <p>Status / Time</p>
  </div>
  <div class="node">
    <h3>Title</h3>
    <p>Status / Time</p>
  </div>
  <div class="node">
    <h3>Title</h3>
    <p>Status / Time</p>
  </div>
  <div class="node">
    <h3>Title</h3>
    <p>Status / Time</p>
  </div>
</div>

＆＃13;

CSS的垂直进度步骤

3 个答案: