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

【问题标题】：How to adjust height and area of nav links in Materialize CSS?如何在 Materialise CSS 中调整导航链接的高度和面积？
【发布时间】：2020-04-16 11:28:18
【问题描述】：

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

【问题讨论】：

标签： html css materialize

【解决方案1】：

好的，快速回答是行高：

nav {
  height: 100px;
}

nav ul li,
nav ul li a,
.brand-logo {
  line-height: 100px;
}

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

Materialize nav 链接都通过行高来获取间距，行高是从 nav 高度向下传递的，当你使用 CSS 手动更改高度时，你还需要更改行高。

另外——Materialize 有两个导航高度，mobile 和 above，它们设置在某些断点处。使用 sass 执行此操作的绝对最佳方法 - 您更改一次导航的高度，然后从这个变量更新所有行高。

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

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

【讨论】：