Come ordinare orizzontalmente div mediante Sortable in JQuery

Question

Sto cercando di ordinare i miei div orizzontalmente in un contenitore div. Ho trovato un example sul sito Web JQuery ma quello è l'ordinamento verticale. Lo voglio orizzontale

Voglio eseguire l'ordinamento in #sortable Div.

Per favore, guidami come posso convertire questo ordinamento verticale in orizzontale.

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> 

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

Answer 1

Si può solo aggiungere questo CSS stile:

#sortable>div { float: left; } 

E saranno orizzontali e ancora ordinabili. You can see a demo of it in action here.

Answer 2

Anche se float:left opere, qui avrei preferito usare display:inline-table per i div, in modo che non si perde il volume degli div ...

Answer 3

è sufficiente aggiungere al vostro CSS: display: inline-block;