像容器一樣放置絕對元素的寬度（在CSS中）

Question

因此，存在以下布局：

我們將重點放在“ SERVICEUSER”按鈕及其子菜單問題上。

因此，有一種方法可以使子菜單（具有絕對位置）的最小寬度與其父菜單相同。

我已經在jsfiddle鏈接上重新創建了這種情況。

因此，基本上需要使.collection的min-width與li的寬度相同。

這種情況的html結構如下：

<ul>
  <li>
    <a href="">SERVICEUSER</a>
    <div class="collection">
      <div class="item">Item-1</div>
      <div class="item">Item-2</div>
      <div class="item">Item-3</div>
    </div>
  </li>
</ul>

這種情況的css是這樣的：

ul { list-style-type: none; }

li { display: inline; }

a { background: green; }

.collection {
  position: absolute; // this is necessary for the situation
  background: white;
}

Answer 1

定位為“絕對”的元素包含在其最接近的相對父元素的流程中。 如果使li相對，則可以設置收集的寬度。

li { display: inline; position: relative; }

.collection {
  position: absolute;
  background: white;
  min-width: 100%;
  white-space: nowrap;
}

編輯：我添加了white-space: nowrap以允許集合（子項）大於主要項目。