[英]Why is Div's background-color not working in nav
在此图像 [1]: https://i.stack.imgur.com/heRuw.png您可以看到导航的当前 state。 “搜索网站”和“申请完全访问”之间的空格是一个 id 徽标的 div,其 flex-grow 为 1。该 div 应该是灰色的,但事实并非如此。 请帮忙。
HTML:
<nav>
<ul>
<li href="#" >Home</li>
<li href="#" >Search for a Website</li>
<div id="logo"></div>
<li href="#" >Apply for Full Access</li>
</ul>
</nav>
CSS:
nav {
display: flex;
align-items: center;
width: 100%;
height: min-content;
background-color: rgb(88, 157, 172);
padding: 0px;
}
ul {
display: flex;
width: 100%;
align-items: center;
margin: 0px;
padding: 0px;
}
li {
display: flex;
justify-content: center;
list-style-type: none;
width: fit-content;
padding: 1.25em 2em;
font-size: 1.25rem;
border-right: 2px solid white;
}
li:hover {
color: white;
cursor: pointer;
}
ul > li:last-of-type {
border-left: 2px solid white;
border-right: none;
background-color: orange;
}
div#logo {
background-color: gray;
flex-grow: 1;
height: 100%;
/* background-image: url(); */
}
因为div
里面没有内容。 你会意识到div
的背景background-color
会影响内容的背景颜色。 像这样:
nav { display: flex; align-items: center; width: 100%; height: min-content; background-color: rgb(88, 157, 172); padding: 0px; } ul { display: flex; width: 100%; align-items: center; margin: 0px; padding: 0px; } li { display: flex; justify-content: center; list-style-type: none; width: fit-content; padding: 1.25em 2em; font-size: 1.25rem; border-right: 2px solid white; } li:hover { color: white; cursor: pointer; } ul > li:last-of-type { border-left: 2px solid white; border-right: none; background-color: orange; } div#logo { background-color: gray; flex-grow: 1; height: 100%; /* background-image: url(); */ }
<nav> <ul> <li href="#" >Home</li> <li href="#" >Search for a Website</li> <div id="logo">logo</div> <li href="#" >Apply for Full Access</li> </ul> </nav>
但是对于这个问题,使用你的方法,我认为我的解决方案是让ul
的倒数第二个孩子使用border-right: gray
。
nav { display: flex; align-items: center; width: 100%; height: min-content; background-color: rgb(88, 157, 172); padding: 0px; } ul { display: flex; width: 100%; align-items: center; margin: 0px; padding: 0px; } li { display: flex; justify-content: center; list-style-type: none; width: fit-content; padding: 1.25em 2em; font-size: 1.25rem; border-right: 2px solid white; } li:hover { color: white; cursor: pointer; } ul > li:last-of-type { border-left: 2px solid gray; border-right: none; background-color: orange; } div#logo { background-color: gray; flex-grow: 1; height: 100%; /* background-image: url(); */ }:nth-last-child(2) { border-right: 2px solid gray; }
<nav> <ul> <li href="#" >Home</li> <li href="#" >Search for a Website</li> <div id="logo"></div> <li href="#" >Apply for Full Access</li> </ul> </nav>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.