css - Twitter 预输入和按钮对齐

Question

我尝试将我的 Twitter 预输入自动完成输入和按钮对齐一段时间，但它一直看起来像这样:

Search field

如您所见:搜索按钮位于搜索栏下方。它看起来像 .twitter-typeahead{ width:100%; } 是这样做的，因为当我删除类时它工作得很好。但不幸的是，在那种情况下，自动完成功能将不起作用。

我已经尝试了几种方法，比如 float:left;并更改宽度(但这会影响响应式布局)。可能这只是一个简单的解决方案，但我不是 css 专家，我在 Stackoverflow 上找不到任何东西。

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

.twitter-typeahead { 宽度:100%； 向左飘浮; 边框:1px 纯红色； 垂直对齐:中间； }

提前致谢。

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% 和 float 并将其放入 css:

.wrapper {
    display: flex;
}

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