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>
效果图
代码是从简书的一位作者哪里看到的，网址忘记了，自己增加了注释和效果图，故声明为原创，侵删！
