首頁 >web前端 >css教學 >如何在沒有額外換行符號的情況下正確調整內聯塊元素?

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

Barbara Streisand
Barbara Streisand原創
2024-12-01 20:35:15760瀏覽

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn