两行上的李项：解决第二行的错位
使用无序列表时，您可能会遇到这样的情况：列表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中文网其他相关文章！
