html - 将 UL block 与 DIV block 的底部对齐

Question

我对此完全陌生，所以如果我提出了一个不清楚的问题，请要求澄清。

我很难将 ul block 放在 div block 的底部。我已经研究了与我非常相似的问题的答案，但由于某些原因，他们的建议和方法不适用于我的代码。我将提供以下链接:http://jsfiddle.net/bKh5L/

HTML

<div id='tabs'>
    <ul>
        <li>Home</li>
        <li>About Me</li>
    </ul>
</div>

CSS

#tabs{
    position: relative;
}

#tabs > ul{
    height: 100px; 
    position: absolute;
    bottom; 0;    
}

li{
    display: inline-block;
    padding-left: 50px;
    padding-right: 50px;
    margin-right: 25px;
    margin-left: 25px;
    background-color: blue;
    color: red;
}

*{
    margin: 0px;
    border: 1px dashed lightblue;
}

请告诉我哪里出了问题，如果您觉得慷慨，请提供详尽的解释，这样我不仅可以理解代码的工作原理，还可以理解垂直对齐本身的概念。

Answer 1

只需从 ul 中删除 height 并将其设置在 #tabs div 上:

#tabs{
  position: relative;
  height: 100px; 
}

#tabs > ul{
  position: absolute;
  bottom: 0;    
}

此外，您在 bottom: 上也有打字错误。检查这个Demo

将 height 保持在 ul 但没有 position:absolute 的另一种选择:

#tabs > ul:before {
  display:inline-block;
  content:" ";
  height:100%;
}
li{
  vertical-align:bottom;
  display: inline-block;
}

另一个Demo