jquery - 如何使按钮与具有动态添加样式的输入框在同一行

Question

我正在使用 twitter bootstrap 作为我的框架。我有一个输入框，它是一个使用 jQuery 插件的自动完成框。我试图在它旁边添加一个按钮(内联 block )，但它似乎不起作用，并且显示在自动完成框下方。

我注意到，当自动完成插件启动时，它会将输入框包装在一个 div 中，所以也许这就是我无法将它们放在同一行的原因。

HTML

<div class="col-md-6 col-sm-6 col-xs-6">
  <input id="autocomplete" type="text" value="" /> 
  <button class="btn btn-success btn-sm" style="display:inline-block"> Search</button>
</div>

我创建了一个 jsfiddle 来重现我的问题:

https://jsfiddle.net/rdawkins/Lh3fqy9w/15/

Answer 1

是的，你是对的，问题是因为你的自动完成被包裹在一个 div 中。因此，也将 display:inline-block 添加到那个 div。

CSS:

.easy-autocomplete {  
    display:inline-block;    
}

DEMO