关于项目中下单流程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>

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

感想

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