Question

我在使用Font Awesome列表标记时遇到了一些困难。我正在使用docs中提供的解决方案：

＆＃13;

ul li {
  padding: 10px 0;
  border-bottom: dotted 1px #222;
}

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<ul class="fa-ul">
  <li><i class="fa fa-li fa-check-square"></i>List Item</li>
  <li><i class="fa fa-li fa-check-square"></i>List Item</li>
</ul>

＆＃13;

以下是fiddle

问题在于填充。如果我在<li>元素上设置填充，则<i>元素不会收到填充设置。

感谢。

Answer 1

如果您应用.fa-li课程，图标将不会考虑填充，因为在这种情况下，它们会绝对定位。然而，你可以做的是将它们垂直放置到50%，然后将它们向后移动一半高度的负转换：

.fa-li {
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

演示： http://jsfiddle.net/fknfe8xq/1/

Answer 2

您必须为ul li和ul li i设置相同的上/下填充。

Working example

ul li {
    padding: 10px 0;
    border-bottom: dotted 1px #222;
}

ul li i {
    padding: 10px 0px;
}

Answer 3

将,i添加到您的CSS代码中：

ul li, i {
padding: 10px 0;
border-bottom: dotted 1px #222;
}

这也会将ul li的填充CSS应用于i。

工作JSFiddle： https://jsfiddle.net/joe_young/q4Lzrvnf/

Answer 4

这是预期的，因为图标相对于ul容器是绝对定位的。所以它们不会被设置样式。你将不得不单独设置样式。

i {
    margin-top: 10px;
}

字体真棒列表填充

4 个答案: