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

我希望在容器div中水平排序我的div。 我在JQuery网站上找到了一个例子 ，但这是垂直排序。 我希望它是水平的。

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

请您指导我如何以水平方式转换此垂直排序。

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; }  

JavaScript的

  $(function() { $("#sortable").sortable({ revert: true }); });  

HTML

 
 
 
Home
 
Contact Us
 
FAQs
 
  

截图替代文字http://sofzh.miximages.com/jquery/351xsfc.jpg

Answer 1

你可以添加这个CSS样式：

 #sortable>div { float: left; } 

它们将是水平的，仍然可以排序。 你可以在这里看到它的演示 。

Answer 2

虽然float:left有效，但在这里我宁愿使用display:inline-table作为div，这样你就不会失去div的音量……

Answer 3

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