下拉内容比下拉更广泛

Question

我在React中创建了一个下拉组件。我希望组件可以重复使用，因此我希望它能够扩展它以填充100％的容器。我目前的问题是，我的下拉按钮和我的下拉内容的宽度都是100％。下拉按钮会扩展以填充其容器的宽度，但是下拉内容会扩展得更多，因为它的位置是绝对的。

如何让下拉内容与下拉按钮的宽度相同？

我在codesandbox上创建了一个示例。

直接链接：https://p34wl136rj.codesandbox.io/

链接到编辑器：https://codesandbox.io/s/p34wl136rj

Answer 1

这是因为下拉菜单中包含position:absolute，它获得了具有position:relative的最近父级的宽度。 试试这个：

.dropdown {
   position: relative;
}