css - 具有浮动和绝对定位的水平导航

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;
    }