我目前正在处理一个无序列表，其中包含带有标语的列表项。我遇到了有关一个列表项的问题，该列表项足够长，可以占用两行（参见图片）
我希望第二行与第一行对齐。这是我正在使用的 HTML 代码。我使用 fontAwesome 作为检查图像。
ul {
width: 300px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="fa-ul custom-list">
<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>
我已经尝试输入多个 在“2”和“行”之间，但这对我来说似乎是一个非常糟糕的做法。我希望有人能帮助我解决这个问题。
这是因为刻度线是内联内容，因此当文本换行时，它将继续像往常一样流动。
您可以利用以下功能来阻止此行为text-indent:
text-indent 属性指定元素文本内容的第一行开始之前应保留多少水平空间。
文本缩进 (https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent)
通过提供负text-indent您可以告诉第一行向左移动所需的数量。如果您随后指定一个正数padding-left您可以取消此偏移量。
在下面的示例中，值为1.28571429em被使用是因为它是width设置在.fa-fw通过字体真棒。
ul {
width: 300px;
}
li {
padding-left: 1.28571429em;
text-indent: -1.28571429em;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="fa-ul custom-list">
<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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
