如何消除兩行列表項目第二行的邊距？

兩行李項目：消除第二行邊距

在無序列表中，使用者常會遇到清單項目變長的問題並跨越多條線，形成不均勻的外觀。當第二行未對齊、超出第一行的邊緣時，就會出現此問題。為了解決這個問題，我們將利用 CSS 屬性「text-indent」和「padding-left」。

理解 Text-Indent 和 Padding-Left

“text-indent”指定元素內第一行文字之前剩餘的水平空間量。透過使用負值，第一行可以向左移動。相反，「padding-left」控制元素左邊緣與其內容之間的空間。透過應用正值，我們可以抵消縮排。

實作解決方案

為了將第二行與第一行對齊，我們使用以下CSS 程式碼：

ul {
  width: 300px;
}
li {
    padding-left: 1.28571429em;
    text-indent: -1.28571429em;
}

「1.28571429em 」的值至關重要，因為它對應於「font-awesome」使用的複選標記圖示。透過設定負的「text-indent」並用正的「padding-left」取消它，清單項目的文字會向左移動，同時保持複選標記的位置。

結論

此技術允許列表項目垂直擴展而不影響其對齊方式。透過調整「text-indent」和「padding-left」屬性，開發者可以微調無序列表的外觀，增強視覺美感。

以上是如何消除兩行列表項目第二行的邊距？的詳細內容。更多資訊請關注PHP中文網其他相關文章！