css - 带有 float 和绝对定位的水平导航

Question

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

导航栏高 60 像素，每个列表项高 50 像素，我希望事件选项卡高 55 像素。问题是，如何让列表项“粘贴”到导航栏的底部，而不改变它们的水平位置？

我尝试过的事情:(这个列表会增加)

• ul#nav{position:relative;} 和 ul#nav li{position:absolute;bottom:0;} 将所有元素堆叠在一起；我拒绝对每个选项卡的位置进行硬编码
• ul#nav li.active {position:relative;bottom:/* 高度差 */;} 离开标签最初为空的 block ，有效地充当不需要的边距<

Answer 1

解决方案很简单(我已经将其用于列表项的样式设置)。我没有为列表项本身设置样式，而是为它们的内容设置样式，每个内容都是 anchor 标记。所以默认的 anchor 标签有

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

当 .active 标签被设置样式时

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

一个没有我想象的那么难的问题。