为什么这个绝对 ul 会移出它的父级？

Question

为什么当容器 div 是它的父元素时，ul 元素会获得包装元素的完整宽度？我该如何更改？

HTML 的结构：

Wrapper
  | container
       | label
       | input
       | ul
       | botton

HTML & CSS:

.wrapper{
  margin: 20px auto;
}
.container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 200px;
  width: 80%;
  margin: auto;
}
  
.country-input {
  height: 30px;
  margin-bottom: 50px;
}
  
ul {
  height: 200px;
  width: 100%;
  overflow: hidden;
  overflow-y: scroll;
  position: absolute;
  background-color: #F2F2F2;
  top: 20px;
  left: 0px;
}

<div class="wrapper">
  <div class="container">
    <label for="country">State</label>
    <input class="input country-input" id="country" type="text" />
    <ul id='country-list'>
      <li id="US">United States</li>
      <li id="AF">Afghanistan</li>
      <li id="AX">Åland Islands</li>
      <li id="AL">Albania</li>
    </ul>
    <button>explore</button>
  </div>
</div>

Here is a link 到完整代码

这是它的样子：

here

在左侧您可以看到元素获得的负数位置：

here

Answer 1

这只是因为您的 <ul> 标签使用了填充。查看代码段并告诉我这是您要找的内容吗？

.wrapper{
    margin: 20px auto;
}
.container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 200px;
    width: 80%;
    margin: auto
  }
  
  .country-input {
    height: 30px;
    margin-bottom: 50px;
  }
  
  ul {
    height: 200px;
    width: 100%;
    overflow: hidden;
    overflow-y: scroll;
    position: absolute;
    background-color: #F2F2F2;
    top: 20px;
    padding: 0;
  }

  li {
    padding-left: 40px;  

  }

<div class="wrapper">
        <div class="container">
            <label for="country">State</label>
            <input class="input country-input" id="country" type="text" />
            <ul id='country-list'>
                <li id="US">United States</li>
                <li id="AF">Afghanistan</li>
                <li id="AX">Åland Islands</li>
                <li id="AL">Albania</li>
            </ul>
            <button>explore</button>
        </div>
    </div>

Answer 2

您也可以考虑使用 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>

Answer 3

在 ul 标签中设置 - width: unset、left: 0 和 right: 0

.wrapper{
    margin: 20px auto;
}
.container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 200px;
    width: 80%;
    margin: auto
  }
  
  .country-input {
    height: 30px;
    margin-bottom: 50px;
  }
  
  ul {
    height: 200px;
    width: unset;
    overflow: hidden;
    overflow-y: scroll;
    position: absolute;
    background-color: #F2F2F2;
    top: 20px;
    left: 0;
    right: 0;
}

<div class="wrapper">
        <div class="container">
            <label for="country">State</label>
            <input class="input country-input" id="country" type="text" />
            <ul id='country-list'>
                <li id="US">United States</li>
                <li id="AF">Afghanistan</li>
                <li id="AX">Åland Islands</li>
                <li id="AL">Albania</li>
            </ul>
            <button>explore</button>
        </div>
    </div>

Answer 4

请设置ul的样式，padding:0px;

为什么这个绝对 ul 会移出它的父级？

Why does this absolute ul move out of its parent?

html

css

position

display