如何在元素之间创建行 - CSS / HTML [复制]

Question

这个问题在这里已有答案：

• Draw a static line between two divs 3回答
• How to draw a line between two divs? 2回答
• Centering li::before content with li 1回答

我有4个圆圈，我想在这些圆圈之间显示线条，只是表明圆圈相互连接的方式。

.circle {
    height: 30px;
    width: 30px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    margin-left: 40px;
  }

<div>
  <span class="circle"></span>
  <span class="circle"></span>
  <span class="circle"></span>
  <span class="circle"></span>
</div>

我尝试在每个<hr/>元素之后添加<span>，但是，这是在下一行创建线条，任何想法？

小提琴：https://jsfiddle.net/9qyvzehw/

谢谢！

Answer 1

试试这个：

.circle {
  height: 30px;
  width: 30px;
  background-color: #bbb;
  border-radius: 50%;
  float: left;
  margin: 0px;
  padding: 0px;
}
.line{
  height: 2px;
  width: 40px;
  background-color: #bbb;
  float: left;
  margin: 14px 0px;
  padding: 0px;
}
.clear{
  clear: both;
}

<div>
  <span class="circle"></span>
  <span class="line"></span>
  <span class="circle"></span>
  <span class="line"></span>
  <span class="circle"></span>
  <span class="line"></span>
  <span class="circle"></span>
  <span class="clear"></span>
</div>