css - 导航栏样式有问题

Question

我刚刚创建了一个 Materialize CSS 导航栏，并在文本中放置了一些图标。

我尝试更改代码的优先级但没有成功。

<div class="navbar-fixed">
   <nav>
     <div class="nav-wrapper grey darken-4">
       <a href="#!" class="brand-logo"><img src="logo.png" width="315" height="70"></a>
       <ul class="right hide-on-med-and-down">
         <li><a href="#"><i class="small material-icons">home</i>Homepage</a></li>
         <li><a href="#"><i class="small material-icons">store</i>Marketplace</a></li>
       </ul>
     </div>
   </nav>
 </div>

主要问题是文本漂浮在导航栏之外:

https://i.gyazo.com/2130fead13cc9e03e8133b8a7466e9b2.png

Answer 1

图标正在推出我看到的内容。

nav > div.nav-wrapper > div > ul > li > a {
    display: flex;
}

这是一个肮脏的修复希望它有所帮助，也许有更好的 css 但这可行，你也可以为图标添加一些边距。

nav > div.nav-wrapper > div > ul > li > a > i {
    margin-right: 10px;
}