将网站顶部导航栏中的一行选项卡拆分为 2 行

Question

我是这里的编码菜鸟，所以我非常感谢能在这里得到的任何帮助。所以我正在编写一个网站，我的网站顶部有一个导航栏。这是代码。

<!-- Main Body -->
  <body id= "home">
      <!-- Header -->
      <header class="first-page">
        <div id="navbar" class="navbar-top">
          <nav>
            <ul>
              <li><a href="#about">About</a></li>
              <li><a href="#education">Education</a></li>
              <li><a href="#qualifications">Qualifications</a></li>
              <li><a href="#experience">Experience</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </nav>
        </div>

这里是 CSS.

#navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #333;
  color: #fff;
  opacity: 0.8;
  width: 100%;
  height: 70px;
  position: fixed;
  top: 0px;
  padding: 0 30px;
  transition: 0.5s;
  z-index: 2;
}

#navbar a {
  color: #fff;
  padding: 10px 20px;
  margin: 0 5px;
}

#navbar a:hover {
  border-bottom: #28a745 2px solid;
}

#navbar ul {
  display: flex;
}

当我尝试完成媒体查询时，我似乎无法将这行导航栏拆分为单独的两行。如果一直排成一排，在phone上浏览会很拥挤。因此，我想将这一行分成两行作为导航栏。

谁能帮帮我？谢谢你。 :)

Answer 1

添加

flex-wrap: wrap;

到 flexbox 容器，例如。 '#navbar ul'

将网站顶部导航栏中的一行选项卡拆分为 2 行

Splitting a row of tabs in the Navigation Bar at the top of the website into 2 rows

html

css

mpmediaquery