Question

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

我在将div块底部放置ul块时遇到困难。我已经研究了与我的问题非常相似的问题的答案，但由于某些原因，他们的建议和方法对我的代码不起作用。我将提供以下链接：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

只需从height中移除ul并将其设置在#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

Answer 2

bottom;0;
也为父母提供绝对高度。

Fixed fiddle

Answer 3

我想你想要这样的东西bottom:0px;实际上你的小提琴被错误地写成bottom;0;：

将UL块对齐到DIV块的底部

3 个答案:

`See this fiddle`