Question

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

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移出其父级？

4 个答案: