jQuery UI震动效果从新线开始

Question

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

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

Answer 1

如果在效果期间检查源代码，您会看到输入被<div class="ui-effects-wrapper">包裹，这就是它折叠到下一行的原因。我对mootools并不熟悉，但很快就会将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;

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