如何在 CSS 中對齊兩行列表項的第二行？

兩行上的李項與第二行對齊

在無序列表中，您可能會遇到跨越兩行的長列表項，但第二行與第一行不對齊。要解決這種不對齊問題，請利用 text-indent 屬性。

text-indent 屬性指定元素中文字內容第一行之前的水平間距。透過指定負的文字縮排值，您可以將第一行向左移動一定的量。為了平衡此偏移，請套用正的 padding-left 值。

在提供的程式碼範例中，.fa-fw 類別的寬度為 1.28571429em。為了對齊第二行，我們將 li 元素的 text-indent 設定為 -1.28571429em，將 padding-left 設定為 1.28571429em。這會抵消偏移量，從而導致第二行左對齊。

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

實現此解決方案可確保長列表項目的第二行與第一行對齊，從而建立視覺上平衡的無序列表。

以上是如何在 CSS 中對齊兩行列表項的第二行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！