Question

我想在输入字段正下方显示一个div。当然，实现这一点很简单，但是我希望它也可以在移动设备上使用。媒体查询不能很好地工作，所以还有另一种方法吗？

这是实时搜索。我希望div #display正好在输入之下。

它可以在台式机上运行，但不能在移动设备上运行。有没有一般的方法，或者我真的必须使用固定边距，宽度和高度的媒体查询吗？

#display {
  background-color: #f2f2f2;
  position: absolute;
  width: 227px;
  border: solid;
  border-top: none;
  border-radius: 0px 0px 5px 5px;
  border-width: thin;
  z-index: 1 !important;
}
    
.live-search {
  min-height: 30px;
  display: flex;
  align-items: center;
}

<form class="form-inline my-2 my-lg-0" action="search.php" method="post" autocomplete="off">
  <input type="search" name="search" required="" placeholder="Search">
  <button class="btn my-2 my-sm-0" id="search-btn" type="submit">Search</button>
</form>

<div id="display" style="display: block;">
  <a href="candidate.php?id=82925298">
    <div class="live-search">
      <li>82925298, Webdeveloper</li>
    </div>
  </a>
</div>

Answer 1

#display {
  background-color: #f2f2f2;
  width: 181px;
  border: solid;
  border-top: none;
  border-radius: 0px 0px 5px 5px;
  border-width: thin;
  z-index: 1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<form action="search.php" method="post" ...>
  <input type="search" name="search" ...>
  <button id="search-btn" type="submit">
          Search
  </button>
</form>

<div id="display">
  <a href="candidate.php?id=82925298">
    <div class="live-search">
      <li>82925298, WebDeveloper</li>
      <li>82925299, WebDesigner</li>
    </div>
  </a>
</div>

输入字段下的Div

1 个答案: