Question

我在页面中添加了一个带有图标的Materialise的侧导航版本。但是当我点击展开并显示侧面导航时，图标会对角堆叠。我无法弄清楚为什么。

以下是我正在使用的代码。

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

物化侧面导航中的CSS图标不对齐？

1 个答案: