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

我的导航栏中有一个品牌徽标,为了使其合适且美观,我必须增加导航栏的高度。然而,这样做后,导航链接保持在原来的位置,就好像高度从未改变一样。为了解决这个问题,我必须为 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;

}


泛舟湖上清波郎朗
浏览 87回答 1
1回答

月关宝盒

好的,快速回答是行高:nav {&nbsp; height: 100px;}nav ul li,nav ul li a,.brand-logo {&nbsp; line-height: 100px;}https://codepen.io/doughballs/pen/vYNGGYWMaterialise 导航链接都通过行高获取间距,行高是从导航高度向下传递的,当您使用 CSS 手动更改高度时,您还需要更改行高。另外 - Materialise 有两个导航高度,移动和上方,并且它们设置在某些断点处。执行此操作的绝对最佳方法是更改导航的高度一次,然后所有行高都会从该变量更新。如果您对此感兴趣,请告诉我,我将更新笔。您不需要对边距做任何疯狂的事情 - 使用与 Materialise 相同的约定。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5