我的導航欄中有一個品牌徽標，為了使其合適且美觀，我必須增加導航欄的高度。然而，這樣做后，導航鏈接保持在原來的位置，就好像高度從未改變一樣。為了解決這個問題，我必須為 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 相同的約定。
- 1 回答
- 0 關注
- 143 瀏覽
添加回答
舉報
0/150
提交
取消