jQuery可从垂直到水平排序

我希望能够使用jQuery的排序表将单词从垂直列表添加到水平列表。 从水平方向到垂直方向按预期工作，但从垂直方向到水平方向，效果很差。它会使单词往下跳，很难将单词放在所需的位置。如果我将css属性float:left添加到oates p选择器中，效果会很好，但我希望避免这种情况，因为我希望列表保持垂直

有什么建议吗

谢谢。 下面是代码和小提琴

html

jQuery

$(function() {

$( "#sortable, #oates" ).sortable({

  connectWith: ".connectedSortable"

}).disableSelection();

});

小提琴：

---

您可以使用带有clear:的浮动元素来保持列表垂直，并设置不同于oates可见的溢出：

---

我不理解你想要的行为。你说你从垂直到水平都有问题，但是你说你想保持列表的垂直？期望的行为是；用户可以从垂直列表中选择任何单词，并将其添加到水平列表上方所需位置的句子中。

#sortable p {
float: left;
padding: 2px;
}

#sortable  {
padding-left: 20px;
border: solid black 2px;
height: 100px; 
}

#oates {
margin: 20px;
color: red; 
padding-left: 20px;
border: solid blue 1px;

} 

#oates p {
  /* float:left;*/

}

$(function() {

$( "#sortable, #oates" ).sortable({

  connectWith: ".connectedSortable"

}).disableSelection();

});

#oates {
    overflow:auto; /*or hidden*/     
} 
#oates p {
   float:left;
   clear:both;
}