Twitter typeahead输入和按钮对齐

Question

我尝试了一段时间来调整我的Twitter typeahead自动完成输入和按钮，但它看起来一直是这样的：

Search field

如您所见:搜索按钮在搜索栏的下方对齐。看起来.twitter-typeahead{ width:100%；}就是这样做的，因为当我删除这个类时，它工作得很好。但不幸的是，在这种情况下，自动补全将不起作用。

我尝试了几种方法，比如浮动:左；更改宽度(但这会影响响应布局)。也许这只是一个简单的解决方案，但我不是css专家，我在Stackoverflow上找不到任何东西。

完整代码：https://jsfiddle.net/u530qvw1/

.twitter-typeahead { width: 100%; float: left; border:1px solid red; vertical-align: middle; }

提前谢谢。

Answer 1

你可以使用flexbox (如果你不需要支持IE9：-)：

<div class="wrapper">
      <input class="zoeken twitter-typeahead" type="text" placeholder="Search" />
      <button type="submit" class="search-btn">
          <span class="">Zoeken</span> <i class="fa fa-search"></i>
      </button>
</div>

并从twitter-typeahead类中删除100%和浮点数，并将其放入css：

.wrapper {
    display: flex;
}

.twitter-typeahead {
    flex: 1 0 auto;
}