在侧面实现CSS图标-导航不对齐？

Question

我已经添加了一个侧面导航版本的Materialize，在我的页面上有图标。但当我单击以展开并显示侧边导航时，图标以对角线方式堆叠。我不知道为什么。

​

​

这是我用来做这个的代码。

    <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高度。我以前这样做过，有人在materialize chatter上帮助我，我不记得他的名字了。我知道它很古老，但它可以帮助其他人：

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