两行李项。第二行有没有保证金两行李项。第二行有没有保证金(Li item on two

我目前正在使用含列表标语项目的无序列表上。我有一个关于列表项，这是足够长，占用两行的问题（见图片）

我想它，以便第二行与第一行对齐。这是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:

这是因为蜱是内嵌的内容，所以当文本换将继续流如常。

您可以通过利用停止这种行为text-indent ：

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

Answer 2:

你可以添加到您的UL：

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

的jsfiddle

Answer 3:

你可以通过设置它们去掉勾选出来的页面流的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>

Answer 4:

您可以使用“显示：表”的风格里，和内创建“显示：表单元格”跨度风格。或者创建对应的类。像这样：

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

Answer 5:

你可以把你的文字在一个div ，给float:left到你内心的li和div 。

Answer 6:

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

添加填充和文本缩进 - 使与李文字：之前。

文章来源: Li item on two lines. Second line has no margin