gpt4 book ai didi

javascript - 出现在一行中的 Jquery UI 可拖动项目

转载 作者:行者123 更新时间:2023-11-28 03:51:01 24 4
gpt4 key购买 nike

我在这里有一个简单的可拖动函数,我正在将其用于数学游戏我试图让我的数字出现在一行中但目前使用下面的代码它们看起来像这样堆叠在一起1个2个3个4个我如何让他们变成这样 1 2 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; 使其水平。

.draggable1 img { 
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
}

Fiddle

关于javascript - 出现在一行中的 Jquery UI 可拖动项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33908284/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com