如何在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;