我在这里有一个简单的可拖动函数，用于数学游戏，我试图使我的数字显示在一行中，但当前使用下面的代码，它们看起来像这样堆叠在一起
一
二
三
四
我怎么才能让他们变成这样12 3 4 5
<!DOCTYPE html>
<html>
<head>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#draggable1" ).draggable();
});
</script>
</head>
<body>
<div id="draggable1" class="ui-widget-content">
<p><img src="mypicturesurl.com is here;"></p>
</div>
<div id="draggable1" class="ui-widget-content">
<p><img src="mypictureurl.com;"></p>
</div>
<div id="draggable1" class="ui-widget-content">
<p><img src="Samepictureurl.com;"></p>
</div>
</body>
我只是用一个函数测试所有的函数，看看是否能把它们放到行中。谢谢你的帮助
最佳答案
您需要确保将float: left添加到CSS中，以确保元素从左侧开始并保持水平。您还必须确保使用每个元素继承该类。您的代码使用了draggableID，您的元素都没有继承它。另外，元素ID应该是不同的，因此我在下面修改的代码中使每个元素都有一个唯一的ID，并将CSS类型更改为一个类：
<!DOCTYPE html>
<html>
<head>
<style>
.draggable { width: 150px; height: 150px; padding: 0.5em; float: left;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#draggable1" ).draggable();
});
</script>
</head>
<body>
<div id="draggable1" class="draggable ui-widget-content">
<p><img src="mypicturesurl.com is here;"></p>
</div>
<div id="draggable2" class="draggable ui-widget-content">
<p><img src="mypictureurl.com;"></p>
</div>
<div id="draggable3" class="draggable ui-widget-content">
<p><img src="Samepictureurl.com;"></p>
</div>
</body>
</html>
关于javascript - jQuery UI可拖动项显示在一行中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33908284/