Question

我们如何将所有列表项对齐到以边距分隔的父项底部。

如果我申请职位：绝对; bottom：0，所有元素都对齐底部，但边距被丢弃。

 #bars0 {
width: 472px;
height: 258px;
position: relative;
 }
 #bars0 li {
border: solid red 1px;
width: 30px;
height: 50px;
margin-right: 95px;
position: absolute;
    bottom: 0   
}

  <div id="bars0">
   <ul><!-- update: added ul -->
  <li></li>
  <li></li>
  <li></li> 
  <li></li>
  </ul>
  </div>

Answer 1

任何原因导致您无法用<li>标记包围<ul>并绝对定位<ul>？这样你就可以控制内部<li> ??

的边际

HTML：

<div id="bars0">
    <ul>
        <li></li>
        <li></li>
        <li></li> 
        <li></li>
    </ul>
</div>

CSS：

#bars0 {
    width: 472px;
    height: 258px;
    position: relative;
}

#bars0 ul {
    position: absolute;
    bottom: 0;
}

#bars0 li {
    border: solid red 1px;
    width: 30px;
    height: 50px;
    margin-right: 95px;
    vertical-align: bottom;
    display: block;
    float: left;
}

#bars0 li:last-child {
    margin-right: 0;
}

因此：http://jsfiddle.net/RYBFF/1/

要解决您最近对评论的请求：只需使用：<li>上的最后一个孩子删除列表中最后一项的边距，如上所示。

Answer 2

我认为你正试图做这样的事情：

<style type="text/css">
#container {
    position: relative;
    height:200px;
    border:1px solid red;
}
#bars{
    position:absolute;
    bottom: 5px;    
}
#bars ul li {
    float: left;
    min-width:100px;
}
</style>
<div id="container">
    <div id="bars">
        <ul>
            <li>Test</li>
            <li>Test 2</li>
        </ul>
    </div>
</div>

这是一个jsFiddle演示：http://jsfiddle.net/YYCZc/2/

将div与底部对齐并应用边距

2 个答案: