创建一个由垂直线连接的圆圈，并在每个圆圈的右侧显示文本。

Question

我正在创建一个带连接线的圆圈，并在右侧显示文本。 我尝试了以下代码。如果我从类.info-timeline ul li span.timeline-circle中删除display: block，那么文本会显示在右侧，但是圆圈不会正确显示。

请您帮个忙吧！

我需要的输出结果如下：

.info-timeline ul{list-style: none;margin: 0;padding: 0;}
.info-timeline ul li{margin: 10px;}
.info-timeline ul li span.timeline-circle{
   position: relative;
 border: 2px solid #999;
 border-radius: 100%; 
 width: 50px;
 line-height: 50px;
 text-align: center;
 margin-top: 50px;
 background-color: #fff;
 z-index: 2;
 display: block;
}
.info-timeline ul li span.timeline-circle:before {
 position: absolute; 
 border: 1px solid #999;
 width: 0; 
 height: 50px; 
 display: block;
 content: ''; 
 left: 50%; 
 z-index: 1; 
 top: -54px; 
 margin-left: -1px;
 }
.info-timeline ul li:first-child {margin-top: 0;}
.info-timeline ul li:first-child:before {display: none;}

.info-timeline ul li a{color: #000;}

 <div class="info-timeline">
  <ul>
   <li><span class="timeline-circle">1</span><a href="#">example 1</a></li>
   <li><span class="timeline-circle">2</span><a href="#">example 2</a></li>
   <li><span class="timeline-circle">3</span><a href="#">example 3</a></li>
   <li><span class="timeline-circle">4</span><a href="#">example 4</a></li>
  </ul>
 </div>

- Naren Verma

---

看起来你现在已经有了你正在做的答案。不过，你是否考虑过使用HTML5画布？ - kojow7

Answer 1

您可以使用display: inline-block替代，您还需要移除margin以使它相连：

.info-timeline ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.info-timeline ul li span.timeline-circle {
  position: relative;
  border: 2px solid #999;
  border-radius: 100%;
  width: 50px;
  line-height: 50px;
  text-align: center;
  margin-top: 50px;
  background-color: #fff;
  z-index: 2;
  display: inline-block;
}

.info-timeline ul li:not(:first-of-type) span.timeline-circle::before {
  position: absolute;
  border: 1px solid #999;
  width: 0;
  height: 50px;
  display: block;
  content: '';
  left: 50%;
  z-index: 1;
  top: -54px;
  margin-left: -1px;
}

.info-timeline ul li a {
  color: #000;
}

<div class="info-timeline">
  <ul>
    <li><span class="timeline-circle">1</span><a href="#">example 1</a></li>
    <li><span class="timeline-circle">2</span><a href="#">example 2</a></li>
    <li><span class="timeline-circle">3</span><a href="#">example 3</a></li>
    <li><span class="timeline-circle">4</span><a href="#">example 4</a></li>
  </ul>
</div>

- jaunt

---

你能帮我去掉顶部边框吗？ - Naren Verma

我在Chrome和Mozilla上都进行了检查，它们都显示了边框。 - Naren Verma

我猜你可以将这一行.info-timeline ul li span.timeline-circle:before改为.info-timeline ul li span.timeline-circle:not(:first-child):before。 - kojow7

是的，jaunt是正确的。兄弟姐妹是<li>元素，而不是时间轴圆圈。 :) - kojow7

@kojow7和jaunt，你们能帮忙解决下面链接中的问题吗？https://stackoverflow.com/questions/46905248/how-to-display-data-fetch-record-twice-in-the-single-page - Naren Verma