在它的底部放置一个列表，其中包含元素

我试图在其底部使用<div>并使用position:absolute来定位<ul>我不太确定我缺少什么，但是列表没有出现，并且当我检查元素看起来像它在包含元素的顶部。在它的底部放置一个列表，其中包含元素

.container { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: #BFBFBF 
 
} 
 

 
.list-container { 
 
    background-color: grey; 
 
    position: relative; 
 
} 
 

 
ul { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="container"> 
 
    <div class="list-container"> 
 
     <ul> 
 
      <li> 
 
       <h2>Heading</h2> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>

来源

2014-09-21 Mdd

的.LIST容器没有，因为它不包含任何元素的高度（但对于绝对定位的UL）和它的定位在.container的顶部。绝对定位的ul有一个底部：0使标题文本出现在.container – ckuijjer 2014-09-21 14:12:25

@ckuijjer之上我想我现在就明白了。 list-container div包含ul，但是ul绝对定位并且不在文档流中。这就是为什么.list-container div需要一个高度。 – Mdd 2014-09-21 14:24:08

这正是问题所在！我想你可能会想到将.container和.list容器相结合 – ckuijjer 2014-09-21 14:32:52

您需要的高度设置列表容器，而不是容器。

.container { 
 
    width: 200px; 
 
    background-color: #BFBFBF; 
 
} 
 

 
.list-container { 
 
    background-color: grey; 
 
    height: 200px; 
 
    position: relative; 
 
} 
 

 
ul { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="container"> 
 
    <div class="list-container"> 
 
     <ul> 
 
      <li> 
 
       <h2>Heading</h2> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>

来源

2014-09-21 14:06:37

谢谢！我不确定身高，我想我认为在父div上应用它会很好。 – Mdd 2014-09-21 14:18:50

你没有设定包含组的长度。

.container { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: #BFBFBF 
 
} 
 

 
.list-container { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: grey; 
 
    position: relative; 
 
} 
 

 
ul { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="container"> 
 
    <div class="list-container"> 
 
     <ul> 
 
      <li> 
 
       <h2>Hello</h2> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>

来源

2014-09-21 14:07:09 afzalex

谢谢！我没有意识到它必须位于.list-container div而不是父级。 – Mdd 2014-09-21 14:19:37

在它的底部放置一个列表，其中包含元素

回答

相关问题