如何在容器底部设置一个元素

Question

嗨我有一个容器有一些无序的列表。我想最后一个无序列表被设置在底部的0边界处。这里是我的代码和我试过的并不起作用：

<ul id="updates"> 
       <li>Follow Zack's updates<br/>300 followers. Follows:</li> 
       <li><a href="#"><img src="img/zack/update1.png" alt="update"/></a></li> 
       <li><a href="#"><img src="img/zack/update2.png" alt="update"/></a></li> 
       <li><a href="#"><img src="img/zack/update3.png" alt="update"/></a></li> 
       <li><a href="#"><img src="img/zack/update4.png" alt="update"/></a></li> 
       <li>+ <br/> 10</li> 
      </ul> 


<p> Site powered by zi<span>kio<span></p> 
div#articles p{ 
    margin-top: auto; 
    margin-bottom: 0 
} 
ul#updates{ 
    margin-top: auto; 
    margin-bottom: 0; 
} 

p和需要UL＃更新底部带空白0

* 编辑设置： *父已被设置为位置：固定所以相对定位它不是一种选择

Answer 1

假设你的列表是div.article所有的孩子刚刚成立

div.article { 
    position: relative; /* after your edit: fixed is fine too */ 
    padding-bottom : /* enough to make room for last ul */ 
} 

div.article > ul:last-child { 
    position : absolute; 
    bottom : 0; 
} 

Answer 2

添加position:relative的“含” <div>然后添加position:absolute; bottom:0;您<ul>和<p> CSS

Answer 3

使用列表时就是这样，你最好将列表重置为零边距和填充，然后设置列表的CONTENTS，而不是列表本身。

#updates, #updates li { 
    margin:0; 
    padding:0; 
} 

那么对于您的列表项：

#updates a { 
    display:block; 
    padding: ___ <-- insert your values 
    margin: ___ 
} 

此外，这是更好的形式使用CSS背景比联图像用户界面元素。您可以在列表中设置链接的大小以对应图像大小，并将图像作为CSS背景应用。

#updates a { 
     display:block; 
     background-image:url(img/zack/update1.png); 
     height: ___ 
     width: ___ 
     padding: ___ 
     margin: ___ 
    }