如何在沒有不需要的間距的情況下調整內聯塊元素？

使用「text-align: justify」對齊內聯元素

儘管之前嘗試使用「text-align: justify」均勻對齊內聯塊元素，但出現問題：瀏覽器在100% 寬度元素後面增加了一個空白的垂直空間，從而清除了inline-block行

尋求不使用 line-height: 0 的解決方案，這會消除空白但丟棄原始行高，我們探索潛在的替代方案。

目前的解決方法（IE8 、 FF，Chrome 測試）

（請參閱小提琴： https://jsfiddle.net/jasperdeGroot/xe27o/)

CSS:

.prevNext {
    text-align: justify;
}

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

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

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

說明：

說明：

說明：

說明：

說明：

.prevNext {
    text-align: justify;
    text-align-last: justify; /* IE */
}

說明：

說明：說明：說明書此解決方法利用具有負下邊距的:before偽元素將文字向上移動，消除多餘的線。然後使用position:relative調整內聯塊元素以補償這種位移。 未來的解決方案一個等待全面支持的有前途的解決方案是使用“ text-align-last: justify”，無需解決方法即可對齊內聯元素。然而，它目前需要在 Webkit 瀏覽器中啟用實驗性功能，限制了其可訪問性。 （請參閱小提琴：https://jsfiddle.net/jasperdeGroot/c3r4w/） CSS: CSS:注意：在實現完全支援之前，此解決方案可能不適用於所有瀏覽器。

以上是如何在沒有不需要的間距的情況下調整內聯塊元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！