如何在JQuery中使用Sortable水平排序div

Question

我正在尋找在容器div中水平排序我的div。我在JQuery網站上發現了一個example，但這是垂直排序。我想要水平。

我想在#sortable Div中進行排序。

請你指導我如何以水平方式轉換此垂直排序。

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> 

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

Answer 1

你可以只添加此CSS風格：

#sortable>div { float: left; } 

而且他們將水平，仍然可排序。 You can see a demo of it in action here。

Answer 2

雖然float:left作品，在這裏我想還是用display:inline-table爲div的，這樣你就不會失去你的div的音量...

Answer 3

只需添加到您的CSS：display: inline-block;