首頁 > web前端 > css教學 > 如何消除合理的內聯塊元素下方的額外垂直空間?

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

Linda Hamilton
發布: 2024-12-13 03:19:12
原創
621 人瀏覽過

How to Eliminate Extra Vertical Space Below Justified Inline-Block Elements?

如何正確對齊“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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板