使用CSS内联显示搜索栏和搜索按钮

Question

我正在构建一个小网站(链接)，它在导航栏中显示一个搜索栏。我将引导4用于导航栏控件，Algolia场所用于搜索栏HTML输入元素。问题是，即使我使用的是form-inline，我也不能将搜索栏与搜索按钮对齐。此外，在搜索栏中键入某些内容时显示的搜索结果也会被切断。

​

​

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a href="/" class="navbar-brand">Drinking Fountains</a>

  <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
    <span class="navbar-toggler-icon"></span> 
  </button>

  <div class="collapse navbar-collapse" id="navbarMenu">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="/">Map
          <span class="sr-only">(current)</span>
        </a>
      </li>  
      <li class="nav-item">
        <a class="nav-link" href="/faq">FAQ</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/contact">Contact</a>
      </li>
    </ul>         

    <form class="form-inline my-2 my-lg-0">
      <input class="mr-sm-2"  id="address-bar" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
    </form>              
  </div>
</nav>

Answer 1

#navbarMenu .form-inline {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

..。应该能起作用。

或者，使用Bootstrap flex实用程序类：

<form class="d-flex align-items-center flex-nowrap">

但是，为了也解决border-radius问题，您可能需要将标记更改为：

<form class="form-inline my-2 my-lg-0">
  <div class="input-group">
    <input class="form-control" id="address-bar" type="search" placeholder="Search" aria-label="Search">
    <div class="input-group-append">
       <button class="btn btn-outline-light" type="submit">Search</button>
    </div>
  </div>
</form>

Answer 2

确保<button>是display:inline-block。您的输入是max-width:100%而不是width:100%。

而且，您的.ap-dropdown-menu没有在地图上方正确地建立Z索引。

Answer 3

使用Bootstrap：

将搜索所在的<span>和<div class="d-flex"></div>按钮包装起来，并为您想要的空间添加<span>类mr-2。

应该是这样的：

<div class="d-flex"> <span class="algolia-places mr-2" style="position: relative; display: inline-block; direction: ltr;"> *other your code* </span> <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button> </div>

和

结果