立项上有两行.第二行没有边距 [英] Li item on two lines. Second line has no margin

问题描述

我目前正在处理一个包含有标语的列表项的无序列表.我遇到一个有关一个列表项的问题，该列表项足够长，可以占用两行(见图)

I'm currently working on an unordered list containing list items with taglines. I'm having a problem concerning one list item, which is long enough to take up two lines (See image)

我希望它使第二行与第一行对齐.这是我正在使用的HTML代码.我用fontAwesome来检查图像.

I want it so that the second line is aligned with the first line. This is the HTML code i'm using. I used fontAwesome for the check images.

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'和'lines'之间输入多个 ，但这对我来说似乎是一个非常糟糕的做法.我希望有人可以帮助我解决这个问题.

I already tried to enter multiple   in between '2' and 'lines' but that seems like a really bad practice to me. I hope someone can help me with this problem.

推荐答案

这是因为刻度是内联内容，因此当文本换行时，它将继续照常流动.

This is because the tick is inline content so when the text wraps it will continue to flow as usual.

您可以利用text-indent来停止此行为:

You can stop this behaviour by taking advantage of text-indent:

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

The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element.

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

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

By supplying a negative text-indent you can tell the first line to shift a desired amount to the left. If you then specify a positive padding-left you can cancel this offset out.

在下面的示例中，使用1.28571429em值是因为它是font-awesome在.fa-fw上设置的width.

In the following example a value of 1.28571429em is used because it is the width set on the .fa-fw by font-awesome.

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>

这篇关于立项上有两行.第二行没有边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！