字体超赞列表填充

Question

我在“真棒字体”列表标记上遇到了一些困难。 我正在使用docs中提供的解决方案：

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

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

这是小提琴

问题在于填充。 如果在<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设置相同的顶部/底部填充。

工作实例

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