如何消除合理的內聯塊元素下方的額外垂直空間？

如何正確對齊“text-align: justify;”內聯塊元素

雖然之前的討論已經探索了使用“text- align: justify」均勻分佈內聯塊元素的有效方法，但仍存在一個持久的問題：最後一行下方不需要的垂直空間。

目前解決方法

可以使用以下 CSS 和HTML結構：

HTML:

<div class="prevNext">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
</div>

CSS:

.prevNext {
    text-align: justify;
}

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

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

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

說明：

具有負下邊距的:before 元素會提昇文本行，消除多餘的空間。內聯塊元素上的相對定位抵消了這種轉變，而無需添加額外的行。 em 單位確保邊距對齊，無論使用的行高。

未來的解決方案

近期的解決方案涉及使用text-align-last 屬性:

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

這消除了對額外CSS技巧的需要，但目前需要在Webkit中激活實驗性功能

處理縮小文字問題

如果縮小刪除了內聯塊元素之間的空格，請在錨標記之間添加不間斷空格字符( )。

以上是如何消除合理的內聯塊元素下方的額外垂直空間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！