Question

我想在输入下的列表组（Bootstrap）中显示搜索结果，其中我是hovering my mouse。

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

如何在搜索下方定位列表？

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

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

<强>绝对
该元素从正常文档流中删除;没有为页面布局中的元素创建空间 - position @ MDN

另一个想法是使用flexible box layout。 .content元素成为＆＃34; flex容器＆＃34;它的两个孩子在父母的水平和垂直中心。

下面，我使用了Bootstrap flex classes。

＆＃13;

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.content {
  height: 100%;
  font-family: 'Cutive Mono', monospace;
}

.search {
  margin: 0 0 1em;
}

＆＃13;

<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>

＆＃13;

如何在input元素下显示搜索结果列表？

1 个答案: