구체화 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; 
}