Cómo ordenar divs horizontalmente mediante Sortable en JQuery

Question

Estoy buscando ordenar mis divs horizontalmente en un contenedor div. Encontré un example en el sitio web de JQuery, pero eso es clasificación vertical. Lo quiero horizontal

Quiero hacerlo en #sortable Div.

¿Podrían por favor guiarme cómo puedo convertir esta clasificación vertical de manera horizontal.

CSS

<style type="text/css"> 
    #draggable1 { width: 150px; height: 35px; padding: 0.5em; } 
    #draggable2 { width: 150px; height: 35px; padding: 0.5em; } 
    #draggable3 { width: 150px; height: 35px; padding: 0.5em; } 

    #sortable { width: 700px; height: 35px; padding: 0.5em; } 
</style> 

JavaScript

<script type="text/javascript"> 
    $(function() { 
     $("#sortable").sortable({ 
      revert: true 
     }); 
    }); 
</script> 

HTML

<div class="demo"> 
    <div id="sortable" class="ui-state-default"> 
     <div id = "draggable1" class="ui-state-default">Home</div> 
     <div id = "draggable2" class="ui-state-default">Contact Us</div> 
     <div id = "draggable3" class="ui-state-default">FAQs</div> 
    </div> 
</div> 

pantalla alt text http://i40.tinypic.com/351xsfc.jpg

Answer 1

Usted puede añadir este CSS estilo:

#sortable>div { float: left; } 

Y serán horizontales y aún ordenables. You can see a demo of it in action here.

Answer 2

Aunque float:left obras, aquí prefieren utilizar display:inline-table para los divs, de modo que no se pierde el volumen de su divs ...

Answer 3

acaba de añadir a tu CSS: display: inline-block;