如何使按钮与动态添加样式的输入框位于同一行

Question

我正在使用twitter bootstrap作为我的框架。 我有一个输入框，它是一个使用jQuery插件的自动填充框。 我正在尝试在其旁边放置一个按钮（嵌入式块），但它似乎不起作用，并显示在自动完成框下方。

我注意到，当自动完成插件启动时，它会将输入框包装在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 。 因此，还要向该div添加display:inline-block 。

CSS：

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

演示

Answer 2

演示

将display:inline-block添加到该div

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

Answer 3

尝试浮动这样的元素？

<div class="pull-left">
  <input type="text" value="" /> 
  <button class="btn btn-success btn-sm">Search</button>
</div>

它也应该与列类一起工作：）

Answer 4

EasyComplete仅包装输入元素。 尝试在两者周围添加推荐的包装。

<div class="col-md-6 col-sm-6 col-xs-6">
  <div class="autocomplete-wrap">
    <input id="autocomplete" type="text" value="" /> 
    <button class="btn btn-success btn-sm"> Search</button>
  </div>
</div>

多余的div很难看，但是以我的经验，对定义列的div进行更改通常会在以后导致问题。