首頁 > web前端 > css教學 > 如何將兩行列表項目與未對齊的第二行對齊?

如何將兩行列表項目與未對齊的第二行對齊?

Barbara Streisand
發布: 2024-12-26 18:57:11
原創
528 人瀏覽過

How to Align Two-Line List Items with Misaligned Second Lines?

Li 項目分兩行。第二行沒有邊距

當處理跨越兩行的列表項目時,導致第二行與第一行不對齊,因此有必要實現對齊。出現這種情況的主要原因是清單中的內聯元素允許後續文字流動而不影響其對齊方式。

要解決此問題,可以利用「text-indent」屬性。此屬性控制元素內文字第一行開始之前的間距。透過應用負的「文字縮排」值,第一行可以向左移動特定的量。然後可以使用正的“padding-left”值來偏移此位移,從而實現所需的對齊方式。

考慮以下範例:

ul {
  width: 300px;
}
li {
  padding-left: 1.28571429em;
  text-indent: -1.28571429em;
}
登入後複製

在此範例中,「1.28571429em」值對應於負責複選標記的「font-awesome」圖示元素的寬度。採用此技術可以使文字在兩行的圖示下方對齊,從而修正未對齊的情況。

以上是如何將兩行列表項目與未對齊的第二行對齊?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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