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

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

物化导航链接都通过线高度获得它们的间距，线高度是从导航高度传下来的，当你用CSS手动更改高度时，你还需要更改线高度。

此外，Materialize有两个导航高度，移动和以上，它们设置在特定的断点。做到这一点的最佳方法是使用sass——你只需更改一次导航的高度，然后所有的线高度都会从这个变量中更新。

如果你对此感兴趣，请告诉我，我会更新钢笔的。

你不需要对利润做任何疯狂的事情——使用Materialize使用的相同约定。