html - 像容器一样定位绝对元素的宽度(在 css 中)

Question

于是就有了下面的布局:

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

那么有没有办法让子菜单的最小宽度(绝对位置)与其父菜单相同。

我已经重现了这个情况 jsfiddle link .

所以基本上需要的是使 .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

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

li { display: inline; position: relative; }

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

编辑:我添加了 white-space: nowrap 以允许集合(子项)大于主项。