html - 有没有办法限制导航子菜单 flexbox 中每行的元素数量？

Question

我的主导航元素有很多子元素，但我想让它们保持视觉上的吸引力和整洁。我试图限制每行 4 个子菜单项。

我在网上查了其他帖子，他们的解决方案包括添加一个flex: 1 1 25%;，我已经试过了，但没有任何改变。

.nav {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 0px;
  border: none;
  width: 100%;
  margin: 0;
  padding: 25px 0;
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.item {
  color: black;
  font-weight: bold;
  text-transform: uppercase;
}

.submenu {
  display: none;
  align-items: center;
  align-text: center;
  position: absolute;
  top: 107px;
  left: 0;
  right: 0;
  text-transform: uppercase;
  z-index: 1;
  background-color: #2F4F4F;
  color: white;
}

.item.has-children:hover .submenu {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 10;
  flex-wrap: wrap;
  flex: 1 1 calc(25% - 80px);
  color: black;
  background-color: rgba(255, 255, 255, .8);
}

<nav>
  <ul class="nav">
    <li class="item">
      <a href="index.html">
        <img src="Images/Navigation/Intak Logo 25px High.png" alt="Home" />
      </a>
    </li>
    <li class="item has-children" style="color:#4D4D4D;">Printing
      <ul class="submenu">
        <li>Labels & Stickers</li>
        <li>Banners</li>
        <li>A-Frame</li>
        <li>Menu Boards</li>
        <li>Takeout Menus</li>
        <li>Business Cards</li>
        <li>Dine-In Menus</li>
        <li>Posters</li>
        <li>Envelopes</li>
        <li>Chinese Wedding Cards</li>
        <li>Flyers</li>
        <li>Letterheads</li>
        <li>Brochures</li>
        <li>Vinyl</li>
        <li>NCR Forms</li>
        <li>Catalogues</li>
      </ul>
    </li>
    <li class="item has-children">Graphic Design
      <ul class="submenu">
        <li>Logo Design</li>
        <li>Ads/Flyers/Promotions</li>
        <li>Menu Boards (Digital & Boards)</li>
        <li>Menus (Takeout & Dine-In)</li>
      </ul>
    </li>
    <li class="item has-children">Chinese Calendars
      <ul class="submenu">
        <li>Cane Wallscroll</li>
        <li>Wall</li>
        <li>Mini</li>
        <li>Desk</li>
        <li>Special Desk</li>
        <li>Red Packet</li>
        <li>More</li>
        <li></li>
      </ul>
    </li>
    <li class="item">FAQS</li>
    <li class="item">Contact Us</li>
  </ul>
</nav>
```

我希望它形成:
1 2 3 4
5 6 7 8
9 10 11 12

但保持:12345678

Answer 1

尝试将 flex-wrap 添加到您的 .submenu 并将 25% 的宽度添加到您的 li 元素。

.submenu {
  ...
  flex-wrap: wrap;
}

.submenu li {
  width: 25%;
}

示例:https://codepen.io/giumagnani/pen/QPEjxp