带浮动和绝对定位的水平导航

Question

我有一个无序列表形式的水平导航栏，其中列表项全部浮动，列表具有overflow:hidden;以保持一致性。我希望“活动”选项卡更高，而不更改列表元素的布局。

导航栏高60像素，每个列表项高50像素，我希望活动标签为55像素。问题是，如何让列表项“坚持”到导航栏的底部，而不改变它们的水平位置？

我尝试过的事情:(此列表将会增长）

• ul#nav{position:relative;}和ul#nav li{position:absolute;bottom:0;}将所有元素叠加在一起;我拒绝硬编码每个标签的位置
• ul#nav li.active {position:relative;bottom:/* difference in heights */;}离开了标签最初为空的块，实际上是一个不需要的边距

Answer 1

解决方案很简单（我已经将它用于列表项的样式）。我不是自己设置列表项的样式，而是设置了它们的内容，这些内容都是锚标记。所以默认的锚标签有

height:50px;margin-top:10px;

.active标记的样式

height:55px;margin-top:5px;

比我想象的更难解决的问题。

Answer 2

垂直对齐的示例：http://dabblet.com/gist/5333194

ul {
   line-height:60px;
}
    li {
        display:inline-block;
        vertical-align:bottom;
        height:50px;
    }
    li:hover {
        height:55px;
    }