重新排序ul li与图像

Reorder ul li with image

本文关键字：ul li 图像 排序 新排序      更新时间：2023-09-26

我正在尝试重新排序我的图像。但这行不通。我正在尝试同样的文字它的工作。但是图像发生了什么呢?图像不会重新排序。有什么建议吗? 

 $(function() {
    $( ".sortable-row" ).sortable({
	//alert("a");
	});
  });
ul {
    float: left;
    width: 100%;
    padding: 10px;
    margin: 10px;
    list-style-type: none;
	}
	li {
    display: inline;
	}
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<ul class="sortable-row" >
<li id="1" class="status"><img id="1" width="220px" src="http://img.youtube.com/vi/ijex5274t_c/hqdefault.jpg"/></li>
<li id="2" class="status"><img id="2" width="220px" src="http://img.youtube.com/vi/dDAP9OWtQro/hqdefault.jpg"/></li>
<li id="3" class="status"><img id="3" width="220px" src="http://img.youtube.com/vi/hajnEpCq5SE/hqdefault.jpg"/></li>
<li id="4" class="status"><img id="4" width="220px" src="http://img.youtube.com/vi/jyTA33HQZLA/hqdefault.jpg"/></li>
</ul>
<ul class="sortable-row" >
<li id="15" class="status">Link one</li>
<li id="16" class="status">Link two</li>
<li id="17" class="status">Link three</li>
<li id="18" class="status">Link four</li>
</ul>

您需要更改

  • 元素的CSS，以匹配其高度与图像。

    使用:

    li {display:inline-block}

    • 相关文章：