1

小提琴：http: //jsfiddle.net/RqE2p/

有一个sortable()内联文本元素列表。元素是“第一”，“第二”，...等。其中一些问题（在我的情况下，例如“第五”和“第二”，但我认为这取决于当前的浏览器缩放）是，一旦我开始拖动它，第二个单词就会进入第二行。

这是因为元素的宽度在拖动时会发生变化。在 Chrome Inspector，Computed Styles 中，拖动前的“第五”宽度为 75.19999px。一旦开始拖动，计算的宽度就是 75px。因此，第二个单词不再适合第一行。

对于这个例子，我只在 Chrome 中有问题。但在现实生活中的项目中，这也发生在 FF 中。我不知道，为什么在这个例子中，在 FF 中一切正常。

除了可能制作一个javascript循环并将每个可排序元素的css宽度设置为其当前宽度的1.1倍之外，是否有任何简单的方法来处理这个问题？

4

1 回答 1

2

您可以直接使用 CSS 调整它，而无需涉足 JavaScript：最简单的解决方案是为您的 ul lis 设置一个高度并设置 no-wrap 以确保文本整齐地保持在一行上：

ul li {
    height: 20px;
    white-space: nowrap;
}

这应该可以解决您的问题 :) 享受使用 sortable！

编辑：你能提供更多细节吗？如果 lis 设置为空白：nowrap; 除非 CSS 被覆盖，否则您的文本不应进入第二行。如果是在空白处添加一个重要标签： nowrap; （例如，空白：nowrap！important；）。它在 Chrome 上工作，放大 110 + %

于 2013-09-06T15:30:32.293 回答