gpt4 book ai didi

html - 为什么我的 UL 背景色没有覆盖 LI 元素?

转载 作者:太空宇宙 更新时间:2023-11-03 21:02:01 25 4
gpt4 key购买 nike

在我的 <ul> 上设置背景时, background-color不涵盖其 <li>子元素(它们的 background 不会改变)。如果我设置 background对于 <a>同样,该元素的 background更改但出现细下划线:https://codepen.io/Boryamba/pen/XWJpzvE

我要<li>元素具有相同的 background-color作为我的顶级菜单。

我做错了什么?

* {
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>

最佳答案

您将背景颜色设置为 * 元素,该元素将该背景颜色应用于页面上的每个元素。因此,即使您将不同的背景颜色应用于 ul 元素,li 的背景颜色仍将等于您在 * 元素中设置的背景颜色。从 * 中删除背景颜色,并在需要时将其应用到其他地方。

关于html - 为什么我的 UL 背景色没有覆盖 LI 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59394008/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com