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> 

자바 스크립트

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

당신은 그냥이 CSS를 추가 할 수 있습니다 alt text http://i40.tinypic.com/351xsfc.jpg

Answer 1

스크린 샷 스타일 :

#sortable>div { float: left; } 

그리고 그들은 수평으로 정렬 할 수 있습니다. You can see a demo of it in action here.

Answer 2

당신 된 div의 볼륨을 잃지 않도록 float:left 작품, 여기에 내가 오히려 div에 대한 display:inline-table 사용하는 것이 있지만 ...

Answer 3

은 당신의 CSS에 추가 : 그것은 작동 display: inline-block;