Question

我有一个小问题，因为问题可能很容易......我想我忽略了什么。

无论如何，我正在创建一个交互式表单，用户可以点击li项，点击它们时会得到一个“勾号”图标。但是，出于某种原因，当您单击其他li项时，之前li的大小变为1px ..

我使用$.empty，因为'tick'是使用FontAwesome SVG图标库创建的，方法是将<i class="fa fa-icon"></i>附加到单击的列表项。但是，要删除该刻度，并将其附加到新单击的li项，我使用Jquery $.empty ..这使得li项很小。

看看这个小提琴，看看我的意思。 http://jsfiddle.net/t6exT/9/

希望有人可以给我一个很好的解决方案。谢谢！

P.S。解决方案不能是display:block;，因为我需要display:table;来使'tick'垂直（和水平）居中。

Answer 1

您可以尝试使用:: after伪类强制装箱。

即

#questions li::after {
    display:table-cell;
    content: ''
}

Answer 2

display:table导致问题。如果表是空的，则表不占用高度。

写：

#questions li {
    display:inline-block;
}
li i.fa {
    line-height:40px;
    text-align:center;
}