Html 位置绝对元素'；它的宽度和它一样'；s容器（css格式）

因此，有以下布局：

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

因此，有没有一种方法可以使子菜单的最小宽度（带绝对位置）与其父菜单相同

我已经在这个问题上重现了这种情况

因此，基本上需要使.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>

ul { list-style-type: none; }

li { display: inline; }

a { background: green; }

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

---

以“绝对”定位的元素包含在其最近的相对父元素的流中。如果将

li

设置为相对，则可以设置集合的宽度

li { display: inline; position: relative; }

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

---

编辑：我添加了

空白：nowrap

以允许集合（子项）大于主项。

给出

位置：相对到
li
元素，并给出
最小宽度：100%
至
.collection
如果您选择，您可以绝对定位
ul
，并且不会影响这些样式中的任何一种。