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

Question

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

Answer 1

好的，快速回答是行高：

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 相同的约定。