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

Question

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

如果我申请位置：绝对；底部：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/

要解决您最近对评论的要求：只需使用 :last-child 删除列表中最后一项的边距，<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/