2

嗨，我有一个包含许多无序列表的容器。我希望将最后一个无序列表设置为底部的 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。

*编辑： *父已经设置为位置：固定，所以相对定位不是一个选项

4

3 回答 3

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;
}
于 2012-07-31T13:39:46.773 回答
2

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

于 2012-07-31T13:39:20.750 回答
1

当使用这样的列表时，最好将列表重置为零边距和填充，然后设置列表的 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: ___
    }
于 2012-07-31T13:39:54.053 回答