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;

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

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

希望快速解决这个问题。

Answer 1

#sortable li {
   break-inside: avoid;
}

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

Answer 2

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

#sortable li {
    display: inline-block;
}

相应地为“li”指定宽度。