Question

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

我也尝试使用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;

对您的导航。否则，我建议您为元素设置边距，而不要使用填充，或者如果您想进一步控制，请将所有ul>li的高度设置为100％，并使用flexbox将a居中放置。

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

1 个答案: