jquery - jQuery UI 抖动效果从新行开始

Question

在下面提供的 jsfiddle 链接上，我有一个带有文本的段落，然后是一个输入框。我使用 jQuery UI 来摇动输入框，但奇怪的是，摇动效果从文本下方的一行开始。

score 7 · Accepted Answer

如果您在效果期间检查源代码，您会看到输入被包裹<div class="ui-effects-wrapper">，这就是它折叠到下一行的原因。我不熟悉 mootools，但快速'n'dirty 修复将分配display:inline给该 div：

<style type="text/css">
    .ui-effects-wrapper {
        display:inline;
    }
</style>

score 3 · Accepted Answer

由于没有足够的空间（它被动态包裹在一个 div 中）input在“内联”时摇动，它会换行到下一行并在完成后返回。

将文本和ininput放入块级元素（并排浮动div），一切都保持原位。

另请注意，我删除</input>了，因为没有这样的东西。 <input简单地用一个封闭/>

score 0 · Accepted Answer

对于我的用例，我只是将这些属性添加到包含 div 的类中：

overflow:    visible;
white-space: nowrap;

我认为导致空白环绕的情况可能只有几个像素，那么为什么不让水平溢出稍微过去然后强制它不环绕呢？对于我的用例，这似乎是一种微创方法，因为无论如何文本都应该只在一行上。

3 回答 3