如何修復多行列表項中第二行未對齊？

兩行上的李項：解決第二行的錯位

使用無序列表時，您可能會遇到這樣的情況：列表item 換行到第二行，導致第二行相對第一行偏移。這種未對齊可能會破壞清單的視覺美感。

在提供的範例中，使用以下 HTML 程式碼來建立清單：

<ul>
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>

出現此問題的原因是勾選圖示 ( ) 是內嵌內容。當文字換行時，圖示保持在同一行，導致第二行未對齊。

要解決此問題，可以使用 text-indent 屬性，該屬性指定剩餘的水平空間量在元素中第一行文字之前。透過設定負的文字縮排值，您可以將第一行向左移動，使其與後續行對齊。

li {
  text-indent: -1.28571429em;
}

為了補償負縮進，您可以對element:

li {
  padding-left: 1.28571429em;
}

透過套用這些樣式，您可以將清單項目的第二行與第一行對齊，從而產生更具凝聚力的視覺效果演示。

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