jQuery UI震动效果从新线开始

Question

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

http://jsfiddle.net/VQj2Z/6/

Answer 1

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

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

Answer 2

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

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

http://jsfiddle.net/VQj2Z/10/

还要注意我删除了</input>，因为没有这样的东西。 <input只是用/>关闭

Answer 3

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

overflow:    visible;
white-space: nowrap;

我认为导致空白包装的情况可能只有几个像素，所以为什么不让水平溢出稍微过去然后强制它不要换行？对于我的用例，这似乎是微创方法，因为文本应该只在一行上。