Javascript 我用于页面的jQuery UI可排序项不'；不行？

我试图将s的可排序项作为网格放在我的页面中，但它显示为普通数字，请告诉我原因

<div class="demo">

<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ul>

</div>

1
2
3
4
5
6
7
8
9
10
11
12

我将jQuery中的脚本和样式标记粘贴到头部，如下所示：

<style>
#sortable { list-style-type: none; margin: 0; padding: 0; }
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px;     height: 90px; font-size: 4em; text-align: center; }
</style>
<script>
$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
});
</script>

#可排序{列表样式类型：无；边距：0；填充：0；}
#可排序li{margin:3px 3px 3px 0；padding:1px；float:left；宽度：100px；高度：90px；字体大小：4em；文本对齐：居中；}
$（函数（）{
$（“#可排序”）.sortable（）；
$（“#可排序”）.disableSelection（）；
});

您似乎缺少CSS文件。确保已包含

jquery-ui-x.x.x.css

文件。排序功能工作正常，因此它看起来像是一个演示问题

我从谷歌CDN添加了CSS，现在看起来不错

<link rel="Stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" /> 

---

您可能还想从css中删除

float:left

，使其显示为列表

检查您的控制台，它是否给您带来任何错误？你包括jQuery和jQueryUI了吗？没有错误，我也没有。那么，解决方案是什么呢？这与预期一样有效：。您可能缺少一些样式。