Question

我正在尝试将我的Twitter预先输入自动完成输入和按钮调整一段时间，但它看起来像这样：

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％和float并将其放到css中：

.wrapper {
    display: flex;
}

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

Twitter预先输入和按钮对齐

1 个答案: