jquery - jquery可排序插件中li元素的意外高度

Question

我已经使用了这个插件，它工作得很好，但我面临的一个小错误是 li 元素得到了意想不到的高度。您可以通过以下步骤复制问题： 1. 在 Internet Explorer 中打开 可排序的演示并检查 ul 列表。2. 从开发人员工具 css 添加下面的 css 到 '#sortable'以将此列表分为 2 列

column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
column-gap: 0em;
-moz-column-gap: 0em;
-webkit-column-gap: 0em;

3. 现在观察到第 4 个元素在每一侧被除以一半，尝试拖动列表中的第 4 个项目并观察 li 元素的高度

可排序插件的链接：jQuery-ui-Sortable Demo

希望快速解决这个问题。

Answer 1

您为什么不尝试将 css 赋予“#sortable”中的“li”元素以将列表分为 2 列。例子 ：

#sortable li {
    display: inline-block;
}

相应地给“li”宽度。

Answer 2

#sortable li {
   break-inside: avoid;
}

向 li 添加 break-inside 解决了我的问题。