绝对子宽度与列容器相同

Question

我正在创建自己的下拉搜索栏，当用户输入一些文字时会显示结果。

问题是结果列表div必须是position: absolute。这导致它忽略父col容器宽度。如何获得结果列表以适应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>

Answer 1

我用过：

.player-search-list{
  z-index: 2;
  background-color: white;
  position: absolute;
  width: 100%;
  left: 0;
  padding-left: 15px;
  padding-right: 15px;
}

left是将div放在容器中心。 padding-left and padding-right与col容器的数量相同。这使div保持搜索栏的相同位置和大小。