Html 立项分两行。第二行没有边距

Li item on two lines. Second line has no margin

提问by Kevin Groen

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)

我目前正在处理一个包含带有标语的列表项的无序列表。我在一个列表项上遇到问题，该列表项的长度足以占用两行（见图）

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.

我希望它使第二行与第一行对齐。这是我正在使用的 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>

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.

我已经尝试 在 '2' 和 'lines' 之间输入多个，但这对我来说似乎是一个非常糟糕的做法。我希望有人能帮助我解决这个问题。

回答by Hidden Hobbes

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

这是因为刻度线是内联内容，所以当文本换行时，它会继续像往常一样流动。

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.

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）

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

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

In the following example a value of 1.28571429emis used because it is the widthset on the .fa-fwby font-awesome.

在下面的示例中，1.28571429em使用了一个值，因为它是by font-awesomewidth上的设置.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>

回答by Alvaro Menéndez

you can just add this to your ul:

您可以将其添加到您的 ul 中：

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

JSFIDDLE

JSFIDDLE

回答by Danield

You could remove the check out of the page flow by setting them with position:absolute

您可以通过将它们设置为 position:absolute

ul {
  width: 300px;
}
.fa-fw {
  position: absolute;
  left: -22px;
}

<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>

回答by Hanna Howz

You can use "display:table" as style for li, and inside create a span with "display:table-cell" styling. Or create corresponding class. Like this:

您可以使用“display:table”作为 li 的样式，并在内部创建一个带有“display:table-cell”样式的跨度。或者创建相应的类。像这样：

<li style="display:table"><span style="display:table-cell">text with 
all lines indented</span></li>

回答by Majid Sadr

you can put your text in a divand give float:leftto your inner liand div.

你可以把你的文字放在 a 中，div然后给float:left你的内心li和 div。

回答by m b k

ul li{
padding: 10px 0 10px 20px;
text-indent: -1em;
}

add padding and text indent - that moves the text from the li:before.

添加填充和文本缩进 - 从 li:before 移动文本。