サイドバイザ内のCSSアイコンが整列していませんか？

Question

サイドページにマージンを追加し、ページにアイコンを追加しました。しかし、クリックしてサイドナビゲーションを展開して表示すると、アイコンは斜めに積み重なります。なぜ私は理解できません。ここで

私はこのために使用しているコードです。

<div class="navbar-fixed"> 
<nav class="headerRow"> 
    <div id="adminMenu" class="nav-wrapper"> 
     <a href="#!" class="brand-logo">BASTAS</a> 
     <a href="#" data-activates="narrower" class="button-collapse"><i class="material-icons">menu</i></a> 
     <ul class="right hide-on-med-and-down"> 
      <li> 
       <a href="#" id="home"><i class="medium material-icons">home</i></a> 
      </li> 
      <li> 
       <a href="#" id="giveAGift"><i class="medium material-icons">card_giftcard</i></a> 
      </li> 
      <li> 
       <a href="#" id="dashboard"><i class="material-icons">dashboard</i></a> 
      </li> 
      <li> 
       <a href="#" id="recipientsList"><i class="material-icons">group</i></a> 
      </li> 
      <li> 
       <a href="#" id="addRecipients"><i class="material-icons">groupadd</i></a> 
      </li> 
      <li> 
       <a href="#" id="importRecipients"><i class="material-icons">system_update_alt</i></a> 
      </li> 
      <li> 
       <a href="#" id="sendReminder"><i class="material-icons">email</i></a> 
      </li> 
      <li> 
       <a href="#" id="settings"><i class="material-icons">settings</i></a> 
      </li> 
     </ul> 
     <ul class="side-nav" id="narrower"> 
      <li> 
       <a href="#" id="home"><i class="material-icons">home</i>Home</a> 
      </li> 
      <li> 
       <a href="#" id="giveAGift"><i class="small material-icons">card_giftcard</i>Give</a> 
      </li> 
      <li> 
       <a href="#" id="dashboard"><i class="small material-icons">dashboard</i>Dash</a> 
      </li> 
      <li> 
       <a href="#" id="recipientsList"><i class="small material-icons">group</i>Recipients</a> 
      </li> 
      <li> 
       <a href="#" id="addRecipients"><i class="material-icons">groupadd</i>Add Recipients</a> 
      </li> 
      <li> 
       <a href="#" id="importRecipients"><i class="material-icons">system_update_alt</i>Import</a> 
      </li> 
      <li> 
       <a href="#" id="sendReminder"><i class="material-icons">email</i>Send Reminder</a> 
      </li> 
      <li> 
       <a href="#" id="settings"><i class="material-icons">settings</i>Settings</a> 
      </li> 
     </ul> 
    </div> 
</nav> 

これで任意の助けいただければ幸いです。私は周りを検索し、他の投稿とこの問題を横断しないでください。

Answer 1

おそらくliの高さを変更しようとしました。私はこれを前にやったことがあります。チャットを実現する人が私を助けました。彼の名前は覚えていません。私はそれが古いことを知っていますが、それは他の人を助けることができます：

.side-nav li>a,.side-nav li>a>i.material-icons { 
    height: 42px; 
    line-height: 42px; 
}