李项目两行.第二行没有保证金

Question

我目前正在处理一个无序列表,其中包含带有标语的列表项.我有一个关于一个列表项的问题,这个问题很长,足以占用两行(见图)

我想要它,以便第二行与第一行对齐.这是我正在使用的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"和"行"之间输入多个,但这对我来说似乎是一个非常糟糕的做法.我希望有人可以帮我解决这个问题.

Answer 1

这是因为tick是内联内容所以当文本换行时它会像往常一样继续流动.

您可以通过利用以下方法来阻止此行为text-indent:

text-indent属性指定在元素的文本内容的第一行开头之前应留下多少水平空间.

text-indent(https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent)

通过提供负数,text-indent您可以告诉第一行向左移动所需的数量.如果您指定肯定padding-left,则可以取消此偏移.

在下面的示例中,1.28571429em使用了一个值,因为它是by font-awesome width上的set .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>

Answer 2

你可以把它添加到你的ul:

ul {
text-indent:-20px; 
margin-left:20px;
}

的jsfiddle