Html 为什么这个绝对的ul会离开它的父母？

当container div是其父元素时，为什么ul元素获得包装器元素的全宽？我怎样才能改变这个

HTML的结构：

Wrapper
  | container
       | label
       | input
       | ul
       | botton

HTML和CSS：

.wrapper{
保证金：20px自动；
}
.集装箱{
位置：相对位置；
显示器：flex；
弯曲方向：立柱；
高度：200px；
宽度：80%；
保证金：自动；
}
.国家投入{
高度：30px；
边缘底部：50px；
}
保险商实验室{
高度：200px；
宽度：100%；
溢出：隐藏；
溢出y：滚动；
位置：绝对位置；
背景色：#F2F2；
顶部：20px；
左：0px；
}

陈述

美国
阿富汗
奥兰群岛
阿尔巴尼亚

探索

这只是因为您的

标记使用了填充。看看这个片段，告诉我这就是你们要找的吗

.wrapper{
保证金：20px自动；
}
.集装箱{
位置：相对位置；
显示器：flex；
弯曲方向：立柱；
高度：200px；
宽度：80%；
保证金：自动
}
.国家投入{
高度：30px；
边缘底部：50px；
}
保险商实验室{
高度：200px；
宽度：100%；
溢出：隐藏；
溢出y：滚动；
位置：绝对位置；
背景色：#F2F2；
顶部：20px；
填充：0；
}
李{
左侧填充：40px；
}

陈述

美国
阿富汗
奥兰群岛
阿尔巴尼亚

探索

这只是因为您的

标记使用了填充。看看这个片段，告诉我这就是你们要找的吗

.wrapper{
保证金：20px自动；
}
.集装箱{
位置：相对位置；
显示器：flex；
弯曲方向：立柱；
高度：200px；
宽度：80%；
保证金：自动
}
.国家投入{
高度：30px；
边缘底部：50px；
}
保险商实验室{
高度：200px；
宽度：100%；
溢出：隐藏；
溢出y：滚动；
位置：绝对位置；
背景色：#F2F2；
顶部：20px；
填充：0；
}
李{
左侧填充：40px；
}

陈述

美国
阿富汗
奥兰群岛
阿尔巴尼亚

探索
< /代码> 您也可以考虑使用select +选项标记而不是无序列表。

例如：

<select id='country-list'>
  <option id="US">United States</li>
  <option id="AF">Afghanistan</li>
  <option id="AX">Åland Islands</li>
  <option id="AL">Albania</li>
</select>


美国
阿富汗
奥兰群岛
阿尔巴尼亚
< /代码> 您也可以考虑使用select +选项标记而不是无序列表。

例如：

<select id='country-list'>
  <option id="US">United States</li>
  <option id="AF">Afghanistan</li>
  <option id="AX">Åland Islands</li>
  <option id="AL">Albania</li>
</select>


美国
阿富汗
奥兰群岛
阿尔巴尼亚
在
ul
标签中设置-
宽度：未设置
，
左侧：0
和
右侧：0


.wrapper{
保证金：20px自动；
}
.集装箱{
位置：相对位置；
显示器：flex；
弯曲方向：立柱；
高度：200px；
宽度：80%；
保证金：自动
}
.国家投入{
高度：30px；
边缘底部：50px；
}
保险商实验室{
高度：200px；
宽度：未设置；
溢出：隐藏；
溢出y：滚动；
位置：绝对位置；
背景色：#F2F2；
顶部：20px；
左：0；
右：0；
}

陈述

美国
阿富汗
奥兰群岛
阿尔巴尼亚

探索
在
ul
标签中设置-
宽度：未设置
，
左侧：0
和
右侧：0


.wrapper{
保证金：20px自动；
}
.集装箱{
位置：相对位置；
显示器：flex；
弯曲方向：立柱；
高度：200px；
宽度：80%；
保证金：自动
}
.国家投入{
高度：30px；
边缘底部：50px；
}
保险商实验室{
高度：200px；
宽度：未设置；
溢出：隐藏；
溢出y：滚动；
位置：绝对位置；
背景色：#F2F2；
顶部：20px；
左：0；
右：0；
}

陈述

美国
阿富汗
奥兰群岛
阿尔巴尼亚

探索
请设置ul的样式，填充：0px
 请设置ul的样式，填充：0px