如何在沒有額外換行符號的情況下正確調整內聯塊元素？-css教學-PHP中文網

如何在沒有額外換行符號的情況下正確調整內聯塊元素？

Barbara Streisand

發布： 2024-12-01 20:35:15

原創

805 人瀏覽過

How Can I Properly Justify Inline-Block Elements Without Extra Line Breaks?

行內塊元素能否透過「text-align: justify;」正確對齊？

先前的討論已經探討如何應用「 text-align: justify" 均勻分佈內聯塊元素。但是，使用此技術時，會在對齊元素行的末尾建立換行符。

當前解決方法

要消除此額外的垂直空間，解決方法包括在「先前的元素」上使用負邊距，同時對內聯塊元素應用“position:relative”。此組合會將文字行向上移動，刪除多餘的行。

.prevNext {
    text-align: justify;
}

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

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

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

登入後複製

未來的解決方案

將來，「text-align-last」屬性Firefox 和 Internet Explorer 支持，可以提供更直接的解決方案。然而，它目前在 Webkit 中尚未完全實現。

.prevNext {
    text-align: justify;
    text-align-last: justify;
}

登入後複製

此屬性允許對齊內聯塊元素的最後一行，從而無需解決方法。

以上是如何在沒有額外換行符號的情況下正確調整內聯塊元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！