How do I stop List Items from jumping when using inline-block with JQuery draggable?

Question

Just discovered the joys of JQuery's "draggable" API, but I want to display my list using inline-block. This makes the list items jump when you drag them, does anyone know how to fix this?

The code I'm using is:

   $(function() {
        $( "#sortable1, #sortable2" ).sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();
    });​

http://jsfiddle.net/VVaqu/

Answer 1

Another solution if you can't use float:

#sortable1 li, #sortable2 li{
    display: inline-block;
    vertical-align: top;
}

The vertical-align:top is important.

Answer 2

Fiddle demo

Just add : float:left; to your li elements

#sortable1 li, #sortable2 li {
 float:left;
 /*other styles...*/
}