时间戳

首页 > 解决方案 > 无法拉伸两个元素以使它们填满页面的整个宽度

html - 无法拉伸两个元素以使它们填满页面的整个宽度

问题描述

无论设备大小如何，我都在努力让两个元素填满页面的整个宽度。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

标签： htmlcsswidth

解决方案

您需要在容器上设置 100% 宽度并flex-grow: 1在nav元素上设置以使它们平均占用可用空间

body {
  margin: 0;
}

.nav-container {
  position: absolute;
  width: 100%;
  display: flex;
  
}

.menu {
  margin: 0;
}

nav {
  background: #f8f8f8;
  flex-grow: 1;
  height: 300px;
}

.nav2 {
  background: #eee;
}
<div class="nav-container">
  <nav class="nav1">
     <p class="menu">Menu 1</p>
   </nav>
   <nav class="nav2">
     <p class="menu">
       Menu 2
     </p>
  </nav>
</div>

推荐阅读