如何修复多行列表项中第二行未对齐？

两行上的李项：解决第二行的错位

使用无序列表时，您可能会遇到这样的情况：列表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中文网其他相关文章！