HTML让两个span分别向左向右对齐（两端对齐）

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>

 效果图

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