如何使用'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中文網其他相關文章！