设置垂直li导航菜单，每个li具有图像和文本

Question

我正在做一个项目，但遇到一个问题，我无法考虑如何正确设置垂直导航的样式。我希望它能覆盖整个高度，并按以下方式显示（从上到下垂直）：徽标的DIV元素具有与列表项相同的高度，并且没有空白，导航列表项的中间是图像，而其下方是文本，顶部和底部略有留白。这是我当前的代码-

HTML：

    <div className="Dashboard">
    <nav className="SideBox">
        <img className="SideLogo" src={Logo}></img>
        <ul>
            <li><img src={Logo}/><p>Accounts</p></li>
            <li><img src={Logo}/><p>Transactions</p></li>
            <li><img src={Logo}/><p>Documents</p></li>
            <li><img src={Logo}/><p>Wallet</p></li>
            <li><img src={Logo}/><p>Calendar</p></li>
            <li><img src={Logo}/><p>Settings</p></li>
        </ul>
    </nav>
    </div>

CSS：

.Dashboard {
   width: 100%;
   height: 100%;
}

.Dashboard * {
    width: 150px;
    height: calc(100vh / 7);
    background-color: blue;

}

.SideLogo {
    margin: 0 0;
    padding: 0 0;
    display: block;
}

.Dashboard ul {
    text-align: center;
    list-style: none;
    margin: 0 0;
    padding: 0 0;
}

.Dashboard li {
    text-align: center;
    margin: 10px 0;

}

.Dashboard img {
    display: block;
    height: 90%;
}

Answer 1

我希望这对您有很大帮助https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_mobile_navbar如果您只想要垂直菜单...

顺便说一句，您不应重复使用具有相同值（例如，不同类中的margin和padding）的代码