html - 如何使用 CSS 连接两个阶段的圆圈

Question

各位，

我们正在尝试连接不同阶段的两条线路，但似乎 stage2 正在移动到不同的线路。

如何用线连接这两个阶段(圆圈)，使它们出现在同一条线上。截至目前，它总是会换行。

代码如下:

.circle {
  width: 10px;
  height: 10px;
  border-radius: 15px 15px 15px 15px;
  padding: 5px;
  background: white;
  border: 1px solid green;
}

.circle-inner {
  width: 10px;
  height: 10px;
  border-radius: 10px 10px 10px 10px;
  background: green;
}

<font face="Times New Roman" size="1">stage1</font>
<span class="circle" style="display:block">
	<span class="circle-inner" style="display:block"></span>
</span>
<hr style="height:1px; margin-top:-10px; border:none; color:#000; background-color:#000;width:80px;margin-left:22px">
<font face="Times New Roman" size="1">stage2</font>
</span>
<span class="circle" style="display:block">
	<span class="circle-inner" style="display:block"></span>
</span>
<hr style="height:1px; margin-top:-11px; border:none; color:#000; background-color:#000;width:80px;margin-left:22px">

Answer 1

像这样？

.circle {
  width: 10px;
  height: 10px;
  border-radius: 15px 15px 15px 15px;
  padding: 5px;
  background: white;
  border: 1px solid green;
}

.circle-inner {
  width: 10px;
  height: 10px;
  border-radius: 10px 10px 10px 10px;
  background: green;
}

<div style="display:inline-block;">
  <font face="Times New Roman" size="1">stage1</font>
  <span class="circle" style="display:block">
	<span class="circle-inner" style="display:block"></span>
  </span>
  <hr style="height:1px; margin-top:-10px; border:none; color:#000; background-color:#000;width:80px;margin-left:22px">
</div><!--
--><div style="display:inline-block;">
  <font face="Times New Roman" size="1">stage2</font>
  <span class="circle" style="display:block">
	<span class="circle-inner" style="display:block"></span>
  </span>
  <hr style="height:1px; margin-top:-11px; border:none; color:#000; background-color:#000;width:80px;margin-left:22px">
</div>