<li> stay size, when $.empty() - Without Display:block;

Question

I've got a small problem, for what the problem is probably easy.. I guess i'm overlooking something.

Anyway, I'm creating an interactive form where users can click on li items, which get a 'tick' icon when they are clicked. However, for some reason, when you click the other li item, the size of the previous li gets to 1px..

I use $.empty, since the 'tick' is created by using the FontAwesome SVG icon library, by appending <i class="fa fa-icon"></i> to the clicked list item. However, to remove that tick, and append it to the newly clicked li item, I use Jquery $.empty .. Which makes the li item, tiny.

Check out this fiddle, to see what I mean. http://jsfiddle.net/t6exT/9/

Hopefully someone can bring me a great solution. Thanks!

P.s. The solution cannot be display:block;, since I need display:table; for the 'tick' to be vertically (and horizontally) centered.

Answer 1

You could try to force the boxing with a ::after pseudo-class.

i.e.

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

http://jsfiddle.net/t6exT/11/

Answer 2

display:table is causing the problem. Table does not take height if it is empty.

Write:

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

Updated fiddle here.