html - 区分菜单中的最后一个元素

Question

我的菜单有问题。我想为我的最后一个 li 元素添加更多样式。我想添加一些背景色。我试着用填充来做到这一点，但看看发生了什么。一切都崩溃了( Logo 和电话号码也是如此):

我也尝试用 box-shadow 来做这个，但我必须在每个断点上更改参数。有没有通用的解决方案来解决这个问题？

<div class="topbar">
            <div class="logo">
                <img src="img/logo.png" alt="Wapik" class="logo-image">
                <img src="img/phone.png" alt="Phone" class="phone">
                <span>+62 202 555 0117</span>
            </div>
            <div class="navbar-toggle">
                <i class="fas fa-bars"></i>
            </div>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About us</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Contact us</a></li>
                    <li><a href="#">Get started</a></li>
                </ul>
            </nav>
        </div>

CSS

header {
        background: linear-gradient(rgba(45,110,112,.8), rgba(45,110,112,.8)), url('img/baner.png');
        background-size: cover;
        height: 75vh;
        position: relative;
    }

    .topbar {
        padding-top: 40px;
        display: flex;
        justify-content: space-between;
        color: #fff;
    }

    .logo {
        display: flex;
    }

    .logo span{
        padding-left: 5px;
    }

    .logo-image {
        border-right: 2px solid #4f6a6a;
        padding-right: 20px
    }

    .phone {
        padding-left: 20px;
    }

    nav ul {
        display: flex;
    }

    nav ul li:not(:last-of-type) {
        padding-right: 30px;
    }

    nav ul li:last-of-type {
        background-color: rgba(255,255,255,.3);
        padding: 10px 20px;
    }

Answer 1

尝试添加

box-sizing: border-box;

到您的导航栏。否则，我建议您为 a 元素设置边距而不是使用填充，或者如果您想要更多控制，请将所有 ul>li 的高度设置为 100% 并将 a< 居中 里面有 flexbox。