如何在输入元素下显示搜索结果列表？答案

【问题标题】：How can I display the list of the search results under the input element?如何在输入元素下显示搜索结果列表？
【发布时间】：2018-08-14 20:08:42
【问题描述】：

我想在输入下的 list-group (Bootstrap) 中显示搜索结果，我是 hovering my mouse。

如果我在搜索 div 之后列出一个列表，屏幕顶部的 it starts。

如何将列表置于搜索下方？

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.content {
  font-family: 'Cutive Mono', monospace;
}

.search {
  top: 37%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  font-weight: 100;
}

<div class="content">

  <div class="search">
    INPUT
  </div>

  <div class="list-group">
    LIST ITEMS
  </div>

</div>

【问题讨论】：

.search 元素是绝对定位的，因此它已从文档流中移除。您可能希望将列表包含在绝对定位的元素中，或者以不同的方式构建文档。

标签： html css twitter-bootstrap layout

【解决方案1】：

您似乎正在使用position:absolute 将输入垂直和水平居中。但是，绝对定位会从文档流中删除一个元素，因此相对于该元素定位另一个元素可能会产生看似意想不到的结果。

绝对
该元素从正常的文档流中移除；没有为页面布局中的元素创建空间。
-- position @ MDN

另一种想法是使用flexible box layout。 .content 元素成为一个“弹性容器”，它的两个子元素在其父元素中水平和垂直居中。

下面，我用的是Bootstrap flex classes。

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.content {
  height: 100%;
  font-family: 'Cutive Mono', monospace;
}

.search {
  margin: 0 0 1em;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="content d-flex flex-column justify-content-center align-items-center">

  <div class="search">
    <input type="text" placeholder="search">
  </div>

  <ul class="list-group">
    <li class="list-group-item">Test</li>
    <li class="list-group-item">Another Test</li>
    <li class="list-group-item">Sample</li>
    <li class="list-group-item">Another Sample</li>
    <li class="list-group-item">Last one</li>
  </ul>

</div>

【讨论】：