gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 12:42:17 25 4
gpt4 key购买 nike

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

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

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

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

最佳答案

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

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

.active 标签被设置样式时

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

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

关于css - 带有 float 和绝对定位的水平导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17620406/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com