如何在CSS中使绝对定位的元素宽度与其容器相同

Question

所以有以下的布局：

我们关注“SERVICEUSER”按钮及其子菜单的问题。

有没有办法使子菜单（使用绝对定位）的最小宽度与其父菜单相同？

我已经在这个jsfiddle链接上重新创建了这种情况。

基本上需要做的是使.collection的最小宽度与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;
}

- Cristian

---

з»™liе…ѓзө ж·»еЉ position: relative;пәЊз»™.collectionж·»еЉ min-width: 100%;。如жһњдҢ йЂ‰ж‹©зљ„иҮқпәЊдҢ еЏҮд»Өз»қеҮ№е®љдҢҚulпәЊе®ѓдёҚдәљеҢ±е“Қиү™дё¤дёҒж ·еәЏгЂ‚ - theblindprophet

Answer 1

使用"absolute"定位的元素包含在最近的相对父元素的流中。如果您将li设置为相对定位，可以为集合设置宽度。

li { display: inline; position: relative; }

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

编辑：我添加了white-space: nowrap以允许集合（子项）比主项更大。

- noahnu