Css 当float直接应用于元素时，jQueryUI可排序（作为网格）将行移到自身下方

这个问题看起来容易，描述起来难。请参见此处：

为了更清楚地了解正在发生的事情，我更新了小提琴，将class

.ui可排序占位符

添加为可见的红色。这是与可排序表相关的jQueryUI（通常）不可见元素的类。如图所示：。感谢乔治在他的回答中指出了这一点。有了这个答案，我们可能会认为这已经解决了“什么”，但也许“为什么”仍然是TBD。

在显示的三个场景中，它们都将

float:left

应用于LI元素，但最后一个场景的性能很差；在最后一组已排序的项目中，单击第一个或第二个项目会将列表的其余部分“删除”到它们刚刚所在的行下方（并单击该项目）

当使用内联样式将

float:left

CSS直接应用于我的

时，与通过CSS文件应用相同的更改时，将显示该场景。这是jQueryUI bug吗

当我以与how show相同的方式将CSS应用于我的元素时（JSFIDLE中的第一个示例），排序就会很好地进行。然而，一旦相同的CSS（据我所知）直接应用于我的列表项，排序行为就会变得不稳定，如上所述

让jQueryUI在网格中很好地排序的方法是使用类或其他机制仅在CSS文件中应用浮点：

/* Starting from UL descriptor with LI descendants */
.ulClass li {
    float:left;
}
/* or directly to LI element but still via CSS file */
.makeTheseLIsSortable {
    float:left;
}
/* DOES NOT WORK properly to directly apply CSS 
   (items to the right are shifted below when items on left selected) */
<ul id='makeSortable'>
    <li style='float:left'>test</li>
    <li style='float:left'>three</li>
</ul>

/*从具有LI子体的UL描述符开始*/
李老师{
浮动：左；
}
/*或者直接到LI元素，但仍然通过CSS文件*/
.使这些列表可排序{
浮动：左；
}
/*无法正常工作以直接应用CSS
（选择左侧的项目时，右侧的项目将移到下方）*/

测试
三个

为什么jQueryUI处理这两个CSS应用程序的方式如此不同？在渲染时，列表元素本身看起来确实是

float:left

。你的看法如何？为什么我不能直接将CSS应用于列表元素并获得相同的预期行为

---

编辑：多亏了乔治，我现在对发生的事情有了更好的了解。jQueryUI不将元素内联样式复制到它们的“占位符元素”中可能有一些非常好的原因，但它们确实传递了类细节。如果jQueryUI专业人士稍后出现并认为这是一个bug，那么我很高兴报告它。在此之前，请确保通过

类应用可排序元素的浮点！您能解释一下为什么占位符中不包含内联样式吗？
问题是jqueryUI inserts的占位符上没有左浮动样式。jQueryUI复制了为占位符排序的项目上的元素类型和类，但它似乎不复制内联样式。
对这个难题的出色探索；我会承认这是答案，并且我更新了fiddle（），使其更加明显地反映了幕后的情况。谢谢你的灵感。