CSS代码
.box {
width: 100%;
/* 因为 content 会另起一行,影响样式的话,height 设置为具体的值可以避免高度变高的情况 */
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;
}
HTML代码
<div class="box">
<span>1</span>
<span>5</span>
</div>
效果图
代码是从简书的一位作者哪里看到的,网址忘记了,自己增加了注释和效果图,故声明为原创,侵删!