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中。因此，同样将display:inline-block添加到div。

<强> CSS：

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

<强> DEMO

Answer 2

<强> DEMO

将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进行更改通常会导致以后出现问题。

如何在动态添加样式

4 个答案: