如何在沒有額外垂直空間的情況下正確對齊內聯塊元素？

使用「text-align: justify;」對內聯塊元素進行正確的文本對齊

一些討論探討了均勻分佈的挑戰使用「text-align: justify;」跨內聯塊元素的文字。然而，一個揮之不去的問題是元素行下方出現的空白垂直空間。

建議的解決方法，如本小提琴所示，涉及設定「line-height: 0;」在父元素上。但是，這會犧牲先前在子元素上設定的行高。

此小提琴中提出的替代方案可以解決此問題，而不會影響line-height:

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”上的“display: block” " 具有負下邊距的元素會將文字提升一個行高，從而消除多餘的行。內聯塊元素上的“position:relative”抵消了這種位移，但不添加額外的行。

在margin-bottom 和top設定中使用「em」可以容納任何設定為的行高乘數值。 >未來潛在的解決方案採用webkit 屬性：

此方法適用於Firefox 12.0 和IE8 ，但需要在 Webkit 瀏覽器中啟用實驗功能。

以上是如何在沒有額外垂直空間的情況下正確對齊內聯塊元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！