物化 Sidenav 图标问题

Question

我在这里有我的 sidenav，但每次我在链接前放一个图标时，它都会缩进和缩进。请帮帮我..

<ul id="mobile-demo" class="side-nav">
    <li>
    <div class="userView">
        <img class="background" src="http://materializecss.com/images/office.jpg">
        <a href="#!user"><img class="circle" src="http://materializecss.com/images/yuna.jpg"></a>
        <a href="#!name"><span class="white-text name">Nelson Maranan</span></a>
        <a href="#!email"><span class="white-text email">nmaranan11@gmail.com</span></a>
    </div>
    </li>
    <li><a href="#!"><i class="material-icons">home</i>Home</a></li>
    <li><a href="#!"><i class="material-icons">list</i>Browse</a></li>
    <li><a href="#!"><i class="material-icons">message</i>Messages <span class="badge">3</span></a></li>
    <li><a href="#!"><i class="material-icons">notifications</i>Notifications <span class="badge">10</span></a></li>
    <li><div class="divider"></div></li>
    <li><a class="subheader">Subheader</a></li>
    <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>

这是我显示问题的屏幕截图：

但是当我删除图标时它显示得很好。我该如何解决这个问题？

Answer 1

我也遇到过这个问题。

只需在样式表中添加这条规则：

.side-nav li{
    clear: both;
}