我们在做前端开发时候经常会遇到这样的需求：
设计师会要求我们实现这样一个组件，要求是每个item之间的三个点与左右两个item的图标之间保持间距统一。
但是我们往往只能实现这样的效果：
看上去是不也挺可以的了？但是大家都知道，能当设计师的，都长着一双像素眼，他们会在UI走查的时候明确告诉我们这样的实现不符合要求，并附上一张截图：
经过我多日的苦思冥想，终于想到了解决方案。
在逻辑上，我们可以将组件分为上下两个部分，红线上面的部分可以使用flex布局进行对齐，这样就可以保证图标部分间隔相同，并且所有的图案都是居中对齐的。
但是下面的文字部分怎么处理呢？
由于在网页开发中响应式布局是十分重要的，因此不能够通过定位写死每个文字的位置，但是文字部分又确实是间距不相同。
其实解决方案也相当简单，就是让所有的文字都相对上面的图标做绝对定位（position: absolute)，这样文字就很自然地对齐上面的图标了。
代码如下：
首先需要强调，为了开发调试方便，我使用了tailwindcss来进行样式的编辑，不了解的同学可以去官网了解一下使用方法，这里不是打广告（当然我也没有达到能让对方找我做广告的能力）。
首先是做出基本布局：
<div class="flex items-center justify-between">
<div>
<img class="h-[50px]" src="" alt="">
<span>shopping market</span>
</div>
<div class="dot-dot-dot"></div>
<div>
<img class="h-[50px]" src="" alt="">
<span>pay for product</span>
</div>
<div class="dot-dot-dot"></div>
<div>
<img class="h-[50px]" src="" alt="">
<span>package</span>
</div>
<div class="dot-dot-dot"></div>
<div>
<img class="h-[50px]" src="" alt="">
<span>transiting</span>
</div>
<div class="dot-dot-dot"></div>
<div>
<img class="h-[50px]" src="" alt="">
<span>received</span>
</div>
</div>
为方便查看，我就没有将图片引用地址放进来了
代码很简单，<div class="flex items-center justify-between">这段代码的意思是：最外层的容器使用flex布局，横向中心对齐，纵向等间距布局。
dot-dot-dot这个样式类呢，采用简单的阴影就可以实现（当然，也可以使用icon图片）：
.dot-dot-dot {
height: 4px;
width: 4px;
background: #000;
border-radius: 50%;
box-shadow: -10px 0 0 black, 10px 0 0 black;
}
其效果就是这样：
然后就是最关键的一步了：将所有的icon的定位模式改为relative，将底部的文字设置为绝对定位。
<div class="flex items-center justify-between">
<div class="relative">
<img class="h-[50px]" src="" alt="">
<span class="absolute left-1/2 top-full translate-x-self-center whitespace-nowrap text-[16px] text-center">shopping market</span>
</div>
<div class="dot-dot-dot"></div>
...
</div>
上述代码只展示了其中一个item的代码调整，其他的item的样式代码都一样。
其中：
<div class="relative">表示这个div使用相对定位，
<span class="absolute left-1/2 top-full translate-x-self-center text-[16px] text-center whitespace-nowrap ">表示其中的文本采用绝对定位，它的偏移量是距离顶部100%的距离，距离左侧50%的距离，然后使用transform: translateX(-50%)将其进行中心布局。然后设置字体大小为16像素，文字居中，不要换行，就完成啦。
效果如下：
当然，在实际开发中还要注意，由于文字行是绝对定位的，因此容器的高度不会被自动撑开，需要我们手动确定容器的高度，例如这里我们设置icon图片的高度是50像素，文字的字体是16像素，行高设为20像素，因此容器的高度应该是70像素。再往底部添加一个20px的padding，否则由于居中布局导致高度覆盖有问题，就完成了这样一个横向居中布局的组件开发。
附完整代码：
<div class="flex items-center justify-between h-[70px] pb-[20px]">
<div class="relative">
<img class="h-[50px]" src="" alt="">
<span class="absolute left-1/2 top-full translate-x-self-center whitespace-nowrap text-[16px] text-center">shopping market</span>
</div>
<div class="dot-dot-dot"></div>
<div class="relative">
<img class="h-[50px]" src="" alt="">
<span class="absolute left-1/2 top-full translate-x-self-center whitespace-nowrap text-[16px] text-center">pay for product</span>
</div>
<div class="dot-dot-dot"></div>
<div class="relative">
<img class="h-[50px]" src="" alt="">
<span class="absolute left-1/2 top-full translate-x-self-center whitespace-nowrap text-[16px] text-center">package</span>
</div>
<div class="dot-dot-dot"></div>
<div class="relative">
<img class="h-[50px]" src="" alt="">
<span class="absolute left-1/2 top-full translate-x-self-center whitespace-nowrap text-[16px] text-center">transiting</span>
</div>
<div class="dot-dot-dot"></div>
<div class="relative">
<img class="h-[50px]" src="" alt="">
<span class="absolute left-1/2 top-full translate-x-self-center whitespace-nowrap text-[16px] text-center">received</span>
</div>
</div>
.dot-dot-dot {
height: 4px;
width: 4px;
background: #000;
border-radius: 50%;
box-shadow: -10px 0 0 black, 10px 0 0 black;
}
.translate-x-self-center {
transform: translateX(-50%);
}
