UL背景不涵盖LI元素

问题描述 投票：0回答：1

设置背景时，背景颜色不会覆盖

  • 元素（它们的背景不会改变）。如果我也为设置了背景，则元素的背景会发生变化，但会出现下划线：https://codepen.io/Boryamba/pen/XWJpzvE

    我希望

  • 元素具有与我的顶部菜单相同的背景颜色。

    我在做什么错？

    对不起，土豆英语c：

    * {
    padding         : 0;
    margin          : 0;
    box-sizing      : border-box;
    background-color: #546a76;
}

.page-content {
    display: grid;
    grid-template-rows: 8fr 8fr 1fr;
}

.top-header {
    display: grid;
    grid-template-rows: .5fr 7fr;
    height: 100vh;
}

.top-menu-list {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    padding: 1rem;
    justify-content: flex-end;
    background-color: #37454d;
}

.top-menu-list a {
    text-decoration: none;
    font-size: 150%;

}

    <body class="page-content">
    <header class="top-header">
        <nav class="top-menu">
            <ul class="top-menu-list">
                <li><a href="#about">Lorem</a></li>
                <li><a href="#services">Lorem</a></li>
                <li><a href="#contacts">Lorem</a></li>
            </ul>
        </nav>
    </header>
</body>
    • html css menu background-color
    1个回答
    0
    投票

    您正在将背景色设置为*元素，这会将背景色应用于页面上的每个元素。因此，即使将不同的背景颜色应用于ul元素，li的背景颜色仍将与您在*元素中设置的背景颜色相同。从*删除背景颜色，并根据需要将其应用于其他地方。

    最新问题
    © www.soinside.com 2019 - 2024. All rights reserved.