實現Side-Nav中的CSS圖標未對齊？

Question

我在頁面中添加了帶有圖標的側邊導航版本。但是當我點擊展開並顯示side-nav時，圖標就會對角堆疊。我無法弄清楚爲什麼。

這裏是我使用這個代碼。

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