为什么html元素以意外的顺序呈现？

以下代码及其输出在中也可用：

目标：在下面的代码中，我试图创建一个工作流栏，显示步骤1、步骤2等等

预期结果：这些步骤以绿色圆形按钮突出显示，绿色圆形按钮之间应有蓝色箭头

实际结果：如我的小提琴所示，箭头线首先出现，然后是三个圆形按钮，最后是两个箭头

问题：我已经清楚地指定了html元素的顺序（这应该会给我预期的结果）。问题是，为什么排序的方式不同

.绿色按钮{
颜色：白色；
背景色：#27AE60；
边界半径：50%；
高度：50px；
宽度：50px；
边框样式：实心；
边框宽度：0px；
光标：自动；
}
.阿罗{
宽度：120px；
}
.线路{
边缘顶部：25px；
宽度：110px；
背景：蓝色；
高度：1px；
浮动：左；
}
.头{
边缘顶部：15px；
边框顶部：10px实心透明；
边框底部：10px实心透明；
左边框：10px纯蓝色；
浮动：对；
}
1.
2.
3.

css中的浮动线将强制该线显示在圆圈的左侧

试试这个：

.green-button {
          color: white;
          background-color: #27AE60;
          border-radius: 50%;
          height: 50px;
          width: 50px;
          border-style: solid;
          border-width: 0px;
          cursor: auto;
        }

        .arrow {
          width:120px;
        }

        .line {
          margin-top:25px;
          width:100px;
          padding:0 50px;
          height:1px;
          border-style:solid;
          border-width:1px;
          border-color:blue;
          background:blue;
        }

        .head {  
          margin-top:15px;
          border-top: 10px solid transparent; 
          border-bottom: 10px solid transparent;
          border-left: 10px solid blue;
        }

---

给出

箭头
显示内联块。这将按照预期结果对箭头进行排序

.arrow {
  width:120px;
  display: inline-block;
} 

希望这有帮助：）


.green按钮{
颜色：白色；
背景色：#27AE60；
边界半径：50%；
高度：50px；
宽度：50px；
边框样式：实心；
边框宽度：0px；
光标：自动；
}
.阿罗{
宽度：120px；
显示：内联块；
}
.线路{
边缘顶部：25px；
宽度：110px；
背景：蓝色；
高度：1px；
浮动：左；
}
.标题{
边缘顶部：15px；
边框顶部：10px实心透明；
边框底部：10px实心透明；
左边框：10px纯蓝色；
浮动：对；
}

1.
2.
3.