时间戳

首页 > 解决方案 > 将网站顶部导航栏中的一行标签拆分为 2 行

html - 将网站顶部导航栏中的一行标签拆分为 2 行

问题描述

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

<!-- 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;
}

当我尝试完成媒体查询时，我似乎无法将这一行导航栏分成两行。如果一直保持一排，手机浏览时会太拥挤。因此，我想将此行分成两部分作为导航栏。

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

标签： htmlcssmpmediaquery

解决方案

添加

flex-wrap: wrap;

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

推荐阅读