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＃updates都需要设置在底部，边距为0.

* 编辑： *父级已设置为position：fixed因此将其定位为相对不是一个选项

Answer 1

将position:relative添加到“包含”<div>，然后将position:absolute; bottom:0;添加到您的<ul>和<p> css

Answer 2

假设您的列表都是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 3

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

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

然后是您的列表项目：

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

此外，对于UI元素使用CSS背景比使用内嵌图像更好。您可以在列表中设置链接的大小以与图像大小相对应，并将图像应用为CSS背景。

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

如何在容器底部设置元素

3 个答案: