CSS 中 inline-block 两端对齐的解决方案

CSS 中实现两端对齐效果一般是采用 Flexbox 的方式解决，但是 Flexbox 的兼容性问题使得其在目前的前端领域应用性不高，但是实现两端对齐还有一个传统的 CSS 语法是text-align: justify。当我们对inline-block块所属的容器施加text-align: justify时，效果如下：

可见text-align: justify方法可以让第一行实现两端对齐，但是不能控制第二行（最后一行）的对齐方式。

解决这个问题要用一点小技巧，就是使用父块的::after伪元素强制作为父块的最后一行。这样就可以让第二行成为非最后一行，从而成功套用justify对齐方式。

具体实现方式如下：

ul::after {
    content: '';
    display: inline-block;
    width: 100%;
}

效果如下：

Fiddle:

PS. Internet Explorer 浏览器从 6 开始就有了text-align-last CSS 属性，用于控制最后一行的对齐方式，从而不需要::after伪元素就可以实现最后一行的两端对齐。利用该属性和本文提到的方法结合起来就可以做到常用浏览器全兼容的实现。

补充：要实现两端对齐，块与块之间要至少有一个空格，一个空格都没有的话块之间是强制贴合的，见Fiddle。