Css 创建自定义下拉列表时，为什么子元素的宽度比其父元素宽？

我正在尝试为React构建一个自定义下拉组件。不幸的是，我的子列表的宽度（已设置为100%）显示为比其父元素宽

DOM：

<div className="dd-wrapper" id={this.state.wrapperID}>
    <div className="dd-header" id={this.state.headerID} onClick={() => this.toggleList()}>
        <div className="dd-header-title"></div>
    </div>
    <ul className="dd-list hidden" id={this.state.listID}>
        <li className="dd-list-item">Test</li>
        <li className="dd-list-item">Test2</li>
        <li className="dd-list-item">Test3</li>
    </ul>
</div>

以下是相关的css：

.dd-wrapper {
  width: 100%;
  margin-top: 8px;
}

.dd-header {
  height: 40px;
  background-color: #E2E8F2;
  background-image: url("assets/images/down-chevron.png");
  background-repeat: no-repeat;
  background-position: 95% 50%;
}

.dd-list {
  list-style-type: none;
  background-color: white;
  position: absolute;
}

.dd-list li {
  height: 40px;
}

.dd-border {
  border: 1px solid #3d70b2;
}

label {
  display: inline-block;
  width: 100%;
  font-size: 14px;
}

.hidden {
  display: none;
}

结果如下所示：

---

如何在不手动操作的情况下获得与其父级匹配的宽度（为了确保它适用于任何大小的下拉列表？第二，是否有人知道让边界覆盖儿童的好方法？

一个简短提示：这是一个CSS问题，因此您的反应逻辑只是一个障碍，任何人都不愿意回答。我根据您在中的描述提取了重要部分对于下面的一个工作片段，我建议你拿出对你的问题背景不重要的东西，以鼓励更迅速的回答

如何在不手动操作的情况下获得与其父级匹配的宽度（以确保其适用于任何大小的下拉列表）

我认为您要查找的主要内容是父元素上的

位置：相对
。因为绝对定位元素的大小和位置与第一个“定位”相对因此，您可以将其与
顶部
，
左侧
，
右侧
，
底部
，
宽度
和/或
高度
值相结合（可能还有
框大小：边框框；
）

…有人知道一个好办法让边境也覆盖孩子吗

您可以通过将下拉列表放在底部的正上方，并在公共父级上切换一个类来隐藏/显示某些边框来伪造它

下面是要演示的代码片段：


//vanilla JS中的切换逻辑只是为了让示例正常工作
//这不是切换列表上的“隐藏”，而是切换包装器上的“dd closed”类
const wrapperEl=document.querySelector（“.js wrapper”）
const headerell=document.querySelector（'.js header'）
if（包装器和头鱼）{
const-antestorlabel=headerEl.closest（'label'））
const targetEl=ANCESTORLABLE？ANCESTORLABLE:headerEl
targetEl.addEventListener（'单击'，
（）=>wrapperEl.classList.toggle（'dd-closed'）
)
}
.dd包装器{
位置：相对位置；
宽度：100%；
边缘顶部：8px；
}
.dd标题{
位置：相对位置；
高度：40px；
背景色：#E2E8F2；
背景重复：无重复；
背景位置：95%50%；
边框：1px实心#3d70b2；
边框底宽：0；
右侧填充：3em；
}
.dd头：：之前{
位置：绝对位置；
内容：'\25B4'；
右：0；
文本对齐：居中；
线高：40px；
宽度：1米；
排名：0；
底部：0；
字号：2em；
}
.dd列表{
列表样式类型：无；
背景色：白色；
位置：绝对位置；
边框：1px实心#3d70b2；
边际上限：0；
左：0；右：0；
填充：0；
}
李先生{
垂直对齐：中间对齐；
填充：1em；
}
.dd列表li：悬停{
背景色：#eee；
}
标签{
显示：内联块；
宽度：100%；
字体大小：14px；
}
.dd关闭>.dd头：：之前{
内容：'\25BE'；
浮动：对；
}
.dd关闭>.dd头{
边框底宽：1px；
}
.dd关闭>.dd列表{
显示：无；
}

下拉列表

试验
测试2
测试3

（下拉列表要涵盖的其他一些内容）

（我什么也不做）
.dd-wrapper {
  width: 100%;
  margin-top: 8px;
}

.dd-header {
  height: 40px;
  background-color: #E2E8F2;
  background-image: url("assets/images/down-chevron.png");
  background-repeat: no-repeat;
  background-position: 95% 50%;
}

.dd-list {
  list-style-type: none;
  background-color: white;
  position: absolute;
}

.dd-list li {
  height: 40px;
}

.dd-border {
  border: 1px solid #3d70b2;
}

label {
  display: inline-block;
  width: 100%;
  font-size: 14px;
}

.hidden {
  display: none;
}