如何使用'text-align: justify”均匀分布内联块元素？

“”text-align: justify;””行内块元素可以均匀分布吗？

问题:

带有文本对齐的内联块元素：证明努力是合理的均匀地分布内容，在行的底部留下一个空白的垂直空间。传统的解决方案涉及使用 line-height: 0;在父元素上，这可能会破坏现有的行高值。

当前浏览器（IE8、FF、Chrome）的解决方法：

此 CSS 方法解决了该问题不破坏行高：

.prevNext {
    text-align: justify;
}

.prevNext a {
    display: inline-block;
    position: relative;
    top: 1.2em; /* Your line-height */
}

.prevNext:before{
    content: '';
    display: block;
    width: 100%;
    margin-bottom: -1.2em; /* Your line-height */
}

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

:before 元素将文本行向上拉一位行高，消除多余的行但替换文本。相对定位内联块元素可以抵消这种位移，而无需添加额外的行。

使用“-text-align-last: justify;”的未来解决方案（即将支持）：

更清洁的未来解决方案使用：

.prevNext {
    text-align: justify;
    text-align-last: justify; /* Supported in IE and FF, experimental in Chrome */
}

正在进行的 Webkit 支持：

部分 Webkit 浏览器支持此解决方案，但需要启用实验功能。预计未来版本将提供全面支持。

以上是如何使用'text-align: justify”均匀分布内联块元素？的详细内容。更多信息请关注PHP中文网其他相关文章！