jquery 可排序插件中 li 元素的高度异常

Question

我已经使用过这个插件并且效果很好，但是我面临的一个小错误是 li 元素获得了意外的高度。您可以通过以下步骤复制问题： 1. 在 Internet Explorer 中打开 sortable demo 并检查 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 元素的高度

Link 到可排序插件：jQuery-ui-Sortable Demo

希望快速解决这个问题。

Answer 1

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

#sortable li {
    display: inline-block;
}

相应地给 "li" 宽度。

Answer 2

#sortable li {
   break-inside: avoid;
}

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