关于项目中下单流程HTML设计的一些思考

需求

上面文字和圈圈是对齐的。

想法

一开始是想把文字和圈圈分开来的，也就是两个盒子放置。但操作中发现，想把它们对齐非常的难，总有一些是无法对齐的。

最终换了一种实现方式，按照需求，不就是想把它们关联起来嘛，既然如此不把它们分开就好了，那个圈圈就用伪元素来实现，最终代码如下：

<div class="route">
<em>下单</em>
<em class="active">付款</em>
<em>配货</em>
<em>出库</em>
<em>完成</em>
</div>
<style>
.route{
position:relative;
display:flex;
justify-content:space-between;
margin-top:10px;
padding:10px;
background-color:#fff;
}
.route::after{
content:"";
position:absolute;
left:0;
top:58px;
width:calc(100% - 3.6rem);
height:1px;
margin:0 1.8rem;
background-color:#e1e1e1;
}
.route em{
position:relative;
margin:10px 0 40px;
color:#999;
font-size:1.3rem;
font-style:normal;
}
.route em::after{
content:"";
position:absolute;
bottom:-24px;
left:50%;
width:1rem;
height:1rem;
border-radius:100%;
background-color:#e1e1e1;
transform:translateX(-50%);
}
.route .active::after{
width: 1.2rem;
height: 1.2rem;
background-color: #1bc865;
z-index: 999;
top: 32px;
box-shadow: 0 0 0px 5px #adebc7,0 0 0px 10px #dcf7e7;
}
</style>

这种实现方式，就简单的多了，如果不把它们关联起来，在不同手机里面，对齐是很难实现的。

感想

有些东西之所以难实现，就是没有想清楚它们之间的关系，如果能早点想清楚，一切就简单的多。