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 li，jquery sortable遇到垂直对齐问题。根据这个答案：sortable vertical align

jQuery sortable推送内容

1 个答案: