用圖像重新排序ul li

Question

我正在嘗試重新排序圖像。但它不工作。我試圖與文本工作相同。但是，圖像發生了什麼。圖像不重新排序。任何建議請。

$(function() { 
 
    $(".sortable-row").sortable({ 
 
\t //alert("a"); 
 
\t }); 
 
    });

ul { 
 
    float: left; 
 
    width: 100%; 
 
    padding: 10px; 
 
    margin: 10px; 
 
    list-style-type: none; 
 
\t } 
 
\t li { 
 
    display: inline; 
 
\t }

<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>

Answer 1

您需要更改< LI>元素的CSS匹配與圖像的高度。

用途：

li {display:inline-block}