我们经常会有一中需求，一行中左边是一个文案，比如"待处理店铺"，右边是数量比如是“3”，如下图所示
示例图
我们第一个想法就是用弹性盒实现，但是其实有一个很简单的方式用父div,给一个text-align:justify;子元素用span，就可以了不过还是几个需要的点，下面给一个demo：
html
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
css
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
}
.box {
width: 100%;
height: 100%;
/* 设置元素两端对齐 */
text-align: justify;
}
/* 这里的伪元素一定要加上，不然span元素不能两端对齐 */
.box:after {
content: "";
display: inline-block;
overflow: hidden;
width: 100%;
}
.box span {
width: 50px;
height: 50px;
/* 设置盒子为行内块 */
display: inline-block;
background-color: skyblue;
/* 设置盒子内元素水平居中 */
text-align: center;
/* 设置盒子内容垂直居中 */
line-height: 50px;
}
