jsquery可以使用内联块显示划痕显示 [英] jsquery sortable with inline-block display display scratches

问题描述

我正在尝试使用JQuery连接可排序列表，但是，如果我在我的li CSS中使用display：inline-block，则占位符和放置位置不正确。它通常更高，并且项目也会调整大小以便导致wordwrap。

I'm trying to play with connected sortable list with JQuery, however, if I use display:inline-block in my li CSS, the placeholder and the placement is not correct. It's usually higher, and also the items are resized so that cause wordwrap.

如果我更改显示：浮点数内联块：离开这里

If I change display:inline-block by float:left here

ul.fieldlist li
{
        display:inline-block;
        list-style-type: none;
}

然后拖车工作正常，但由于某些原因我不能拖回原来的可排序。

Then the dragdrop is working fine, but for some reasons i'm not able to drag back to the original sortable.

我已经做了一个jsfiddle来显示问题：

I have made a jsfiddle to show the problem:

http://jsfiddle.net/uArNx/5/

我的填充/边距可能有问题，但我无法理解。

It might be a problem with my padding / margins but I couldn't figure out.

欢迎任何帮助：）

推荐答案

修复方法是 vertical-align：top 。我可以说，JqueryUI Sortables不处理 vertical-align：middle well。

The fix is vertical-align: top. As best I can tell, JqueryUI Sortables don't handle vertical-align: middle well.

尝试添加垂直-align：顶部到你的jsfiddle - 它清除了对齐问题。

Try adding vertical-align: top to your jsfiddle--it clears up the alignment issue.

这里有一些注释，并且内联块的初始修复，但我认为valign中间案件错过了。
http://bugs.jqueryui.com/ticket/6942

There are some notes here, and an initial fix for inline block, but I think the valign middle case was missed. http://bugs.jqueryui.com/ticket/6942

这篇关于jsquery可以使用内联块显示划痕显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！