[英]Extend element beyond container, but keep children within container
我最近遇到了一个问题,我想将所有内容保留在父容器中,但我希望导航背景为页面宽度的100%。 我尝试过的方法在使导航宽度为页面宽度的100%方面起作用,但是现在ul内部不受容器的影响,这正是我最初想要的。
我通过在导航中使用另一个容器div使其起作用,但是我觉得这是一个临时的方法。
关于如何使父容器影响导航中的ul的任何建议?
HTML:
<div class="container">
<nav class="menu">
<div class="container">
<ul>
<li><a href="#view1">HOME</a></li>
<li><a href="#view2">ABOUT ME</a></li>
<li><a href="#view3">SERVICES</a></li>
<li><a href="#view4">CURRENT PROJECT</a></li>
<li><a href="#view5">PORTFOLIO</a></li>
<li><a href="#view6">CONTACT ME</a></li>
</ul>
</div>
</nav>
</div>
CSS:
.container {
margin: 0 auto;
width: 1200px;
}
.menu {
left: 0;
right: 0;
height: 80px;
position: fixed;
background-color: rgb(33, 33, 33);
}
.menu ul {
padding: 0;
margin: 0;
color: #fff;
list-style: none;
font-weight: bold;
height: 80px;
float: right;
}
.menu ul li {
display: inline-block;
padding-right: 50px;
}
您可以使用:before
或:after
伪选择器来创建看起来像width
等于页面width
的背景效果。
body { overflow: hidden; width: 100%; margin: 0; } .container { max-width: 1200px; margin: 0 auto; } .menu { height: 80px; position: relative; } .menu:before { background-color: rgb(33, 33, 33); position: absolute; right: -9999px; left: -9999px; content: ''; z-index: -1; bottom: 0; top: 0; } .menu ul { padding: 0; margin: 0; color: #fff; list-style: none; font-weight: bold; float: right; } .menu ul li { display: inline-block; padding-right: 50px; } .menu ul li a { color: #fff; }
<div class="container"> <nav class="menu"> <ul> <li><a href="#view1">HOME</a></li> <li><a href="#view2">ABOUT ME</a></li> <li><a href="#view3">SERVICES</a></li> <li><a href="#view4">CURRENT PROJECT</a></li> <li><a href="#view5">PORTFOLIO</a></li> <li><a href="#view6">CONTACT ME</a></li> </ul> </nav> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.