CSS 最大宽度空白区域答案

【问题标题】：CSS Max-width empty areaCSS 最大宽度空白区域
【发布时间】：2022-01-07 01:07:52
【问题描述】：

我尝试创建一个响应式菜单。为此，我使用 max-width 作为主容器。

在我的菜单中，有一个标志、第一个菜单和第二个菜单。徽标和第一个菜单将在一起，最后一个菜单将向右对齐。我正在尝试使用 flexbox 来实现。你可以在这里看到：https://jsfiddle.net/c64maq7s/23/

我希望菜单宽度为 900 像素。但是，由于我使用最大宽度进行响应式设计，因此在更大的屏幕或浏览器中它不是 900 像素。（我想要一个 900px 的菜单，随着浏览器变小，第一个菜单和第二个菜单之间的空间会越来越小，直到它们之间没有空间。）

如何通过将代码保持为最大宽度来确保菜单完全为 900 像素？

 body{
  font-family:sans-serif;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
  max-width:900px;
}

nav{
  display:flex;
}

nav ul{
  margin:0;
  padding:0;
}

nav ul li{
  list-style-type:none;
}

nav ul.nav{
  display:flex;
}

nav ul.nav li{
  padding:0px 10px;
}

nav ul.secondary-nav{
  display:flex;
  margin-left:50px;
}

nav ul.secondary-nav li{
  padding:0px 10px;
}

<nav>
  <div class="logo">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-apple" viewBox="0 0 16 16">
  <path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282z"/>
  <path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282z"/>
</svg>
  </div>
  <ul class="nav">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
  <ul class="secondary-nav">
    <li>Help</li>
    <li>My Panel</li>
    <li>info@apple.com</li>
  </ul>
</nav>

【问题讨论】：

标签： html css flexbox responsive

【解决方案1】：

我不确定我是否完全理解max-width: 900px; 的用途。但是，我会将您的 nav 嵌套在一个 div 中。在这个例子中，我称之为navbar。您可以在该元素上设置 flex 和 max-width。我不知道你的最终目标是什么，但我永远不会在body 元素或max-width 上应用display: flex;。我弯曲了我添加的 navbar 类并设置了一个媒体查询，指示浏览器在 600 像素处生成 font-size: smaller;

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  height: 100vh;
}

nav {
  display: flex;
}

nav ul {
  margin: 0;
  padding: 0;
}

nav ul li {
  list-style-type: none;
}

nav ul.nav {
  display: flex;
}

nav ul.nav li {
  padding: 0px 10px;
}

nav ul.secondary-nav {
  display: flex;
  margin-left: 50px;
}

nav ul.secondary-nav li {
  padding: 0px 10px;
}

.navbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
  max-width: 900px;
}

@media only screen and (max-width: 600px) {
  .navbar {
    font-size: smaller;
  }
}

<div class="navbar">
  <nav>
    <div class="logo">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-apple" viewBox="0 0 16 16">
  <path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282z"/>
  <path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282z"/>
</svg>
    </div>
    <ul class="nav">
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
    <ul class="secondary-nav">
      <li>Help</li>
      <li style="white-space: nowrap;">My Panel</li>
      <li>info@apple.com</li>
    </ul>
  </nav>
</div>

【讨论】：