我想在输入字段的正下方显示一个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>
发布于 2019-06-06 03:15:39
#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>
https://stackoverflow.com/questions/56465945
复制相似问题