为了账号安全,请及时绑定邮箱和手机立即绑定

如何在 Materialise CSS 中调整导航链接的高度和面积?

如何在 Materialise CSS 中调整导航链接的高度和面积?

泛舟湖上清波郎朗 2024-01-03 14:16:08
我的导航栏中有一个品牌徽标,为了使其合适且美观,我必须增加导航栏的高度。然而,这样做后,导航链接保持在原来的位置,就好像高度从未改变一样。为了解决这个问题,我必须为 ul 标签添加边距。尽管这确实足够向下推链接,但悬停效果不会延伸到导航栏的整个高度。我该如何解决?html:<nav class="deep-orange darken-2">        <div class="nav-wrapper container">            <a class="brand-logo" href=""><img src="logo.png" alt=""></a>            <ul class="hide-on-med-and-down right nav-links">                <li><a href="">Home</a></li>                <li><a href="">Admission</a></li>                <li><a href="">Mentors</a></li>                <li><a href="">Location</a></li>            </ul>        </div>    </nav>CSS:.brand-logo img {    height: 95px;}nav {    height: 100px;}.nav-links {    margin-top: 15px;}
查看完整描述

1 回答

?
月关宝盒

TA贡献1772条经验 获得超5个赞

好的,快速回答是行高:


nav {

  height: 100px;

}


nav ul li,

nav ul li a,

.brand-logo {

  line-height: 100px;

}

https://codepen.io/doughballs/pen/vYNGGYW


Materialise 导航链接都通过行高获取间距,行高是从导航高度向下传递的,当您使用 CSS 手动更改高度时,您还需要更改行高。


另外 - Materialise 有两个导航高度,移动和上方,并且它们设置在某些断点处。执行此操作的绝对最佳方法是更改导航的高度一次,然后所有行高都会从该变量更新。


如果您对此感兴趣,请告诉我,我将更新笔。


您不需要对边距做任何疯狂的事情 - 使用与 Materialise 相同的约定。


查看完整回答
反对 回复 2024-01-03
  • 1 回答
  • 0 关注
  • 86 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信