无论设备的尺寸如何,我都在努力使两个元素占据页面的整个宽度。 Nav1和Nav2在nav-container中彼此相邻,并且其中包含内容,这就是为什么我需要将它们分开。
我以为如果将每个.nav#的宽度都设置为50%,它将可以工作并在任何设备上填满整个宽度,但不会。
.nav-container {
position: absolute;
display: flex;
float: right;
}
.nav1 p {
display: inline;
}
nav {
background: rgb(255, 255, 255);
}
.nav1 {
width: 50%;
height: 300px;
}
.nav2 {
width: 50% height: 300px;
}
<div class="nav-container">
<nav class="nav1">
<p class=""></p>
</nav>
<nav class="nav2">
<p class="menu">
Menu
</p>
</nav>
</div>
试图像在此网站上创建导航栏https://www.ouiwill.com
您需要在容器上设置100%的宽度,并在flex-grow: 1
元素上设置nav
,以使它们平均占用可用空间
body {
margin: 0;
}
.nav-container {
position: absolute;
width: 100%;
display: flex;
}
.nav1 p {
display: inline;
}
.nav2 p {
margin: 0;
}
nav {
background: #f8f8f8;
flex-grow: 1;
}
.nav1 {
height: 300px;
}
.nav2 {
height: 300px;
background: #eee;
}
<div class="nav-container">
<nav class="nav1">
<p class="">Menu 1</p>
</nav>
<nav class="nav2">
<p class="menu">
Menu 2
</p>
</nav>
</div>