导航栏样式有问题

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;
}