jQuery sortable将内容向下推

Question

我已经添加了可排序的jQuery插件，但当我拖动一个项目时，其他所有内容都被压下了一点，但我有这种奇怪的效果。

我不确定这是为什么，当我必须按住鼠标按钮时，它使我很难检查元素。

虽然我曾尝试与唯一的CSS之中：

#link_boxes li { 
    display: inline-block; 
} 

，并没有帮助的。总之，这里是全码：

HTML

<ul id="link_boxes"> 
    <li class="ui-state-default"> 
     <div class="thumbnail"> 
      <div style="background-image: url('http://.../images/blue_aid.jpg')"></div> 
      <div class="caption"> 
       <h4>Hearing Aid Prices</h4> 
       <span class="label label-default">/prices</span> 
      </div> 
     </div> 
    </li> 
    <li class="ui-state-default"> 
     <div class="thumbnail"> 
      <div style="background-image: url('http://.../images/audiologist-02.jpg')"></div> 
      <div class="caption"> 
       <h4>Special Offers</h4> 
       <span class="label label-default">/link1</span> 
      </div> 
     </div> 
    </li> 
</ul> 

CSS

#link_boxes li { 
    display: inline-block; 
    cursor: pointer; 
} 

#link_boxes .thumbnail { 
    width: 194px; 
    margin: 0 14px 0 0; 
    background-color: #e7e7e7; 
} 

#link_boxes .thumbnail > div { 
    width: 100%; 
    height: 180px; 
    background-size: cover; 
    background-position: center center; 
} 

#link_boxes .thumbnail span { 
    font-size: 14px; 
} 

#link_boxes .thumbnail .caption { 
    display: inline-block; 
    height: inherit; 
    padding-top: 0; 
} 

JS

$(document).ready(function() { 
    $("#link_boxes").sortable(); 
    $("#link_boxes").disableSelection(); 
}); 

Answer 1

你应该添加

vertical-align:top; 

给你#link_boxes李，jquery排序有问题垂直对齐。根据这个答案：sortable vertical align