Html 如何使用CSS连接两个阶段的圆

各位

我们正试图用不同的阶段连接两条线路，但似乎阶段2正在向不同的线路移动

如何将这两个阶段（圆）与线连接，使它们显示在同一条线上。到现在为止，它总是在走新的路线

代码如下：

.circle{
宽度：10px；
高度：10px；
边界半径：15px 15px 15px 15px；
填充物：5px；
背景：白色；
边框：1px纯绿色；
}
.内圆{
宽度：10px；
高度：10px；
边界半径：10px 10px 10px 10px；
背景：绿色；
}

stage1

阶段2

您在内联样式中说：

<span class="circle" style="display:block">
<span class="circle-inner" style="display:block"></span>

顺便说一下，完全没有理由使用内联样式，您可以将此定义添加到头部样式中。

像这样吗

.circle{
宽度：10px；
高度：10px；
边界半径：15px 15px 15px 15px；
填充物：5px；
背景：白色；
边框：1px纯绿色；
}
.内圆{
宽度：10px；
高度：10px；
边界半径：10px 10px 10px 10px；
背景：绿色；
}

第一阶段

阶段2

试试这个：

.circle{
宽度：10px；
高度：10px；
边界半径：15px 15px 15px 15px；
填充物：5px；
背景：白色；
边框：1px纯绿色；
}
.内圆{
宽度：10px；
高度：10px；
边界半径：10px 10px 10px 10px；
背景：绿色；
}
.排队{
浮动：左；
}

第一阶段

阶段2

我建议您将代码制作一个堆栈片段，以便我们可以在您的问题中就在这里运行它。将内联样式中的

display:block

更改为

display:inline block

，请对代码进行一个小的解释。这样，一些人就可以理解您尝试了什么，而无需挖掘代码。

<span class="circle" style="display:inline-block">
<span class="circle-inner" style="display:inline-block"></span>