css span 右端对齐_div 内的 span 两端对齐

我们经常会有一中需求，一行中左边是一个文案，比如"待处理店铺"，右边是数量比如是“3”，如下图所示

示例图

我们第一个想法就是用弹性盒实现，但是其实有一个很简单的方式用父div,给一个text-align:justify;子元素用span，就可以了不过还是几个需要的点，下面给一个demo：

html

1

2

3

4

5

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;

}