如何在 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中文网其他相关文章！