我正在创建自己的下拉搜索栏,当用户键入一些文本时它会显示结果。
问题是结果列表 div 必须是 position: absolute
。这导致它忽略父 col 容器宽度。如何让结果列表适合列的宽度?
.player-search-list {
z-index: 2;
background-color: white;
position: absolute;
width: 100%;
}
<div class="row">
<div class="col-6">
<!-- some other content -->
</div>
<div class="col-6">
<div class="top-buffer">
<!-- Relative search bar that expands to bootstrap col -->
<div class="player-search-bar input-group rounded-bottom-0">
<!-- search functionality-->
</div>
</div>
<!-- ***ABSOLUTE drop down*** that doesnt fit inside bootstrap col -->
<div class="list-group player-search-list" id="playerSearch">
<div *ngFor="let result of results | slice:0:9">
<!-- drop down results list functionality -->
</div>
</div>
</div>
</div>
最佳答案
如果有人偶然发现这个问题并且仍在寻找结果:
您的父 DIV(在本例中为 .col-6)必须是 position:relative。 搜索结果的宽度必须设置为100%!
parent_container {
position: relative;
}
search_results {
position: absolute;
width: 100%
}
关于html - 绝对子级与列容器宽度相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49034877/