如何修改代码实现响应式导航栏：小屏下列表移至Logo下方

修改思路 #

用Flex布局替代原有的Float布局，更灵活控制导航栏元素的排列逻辑；在小屏幕断点处切换Flex排列方向为垂直，让导航菜单自然移至Logo下方，同时保留原有交互逻辑。

修改后的HTML代码 #

<nav>
  <div class="logo-container">
    <a href="HomePage.html">
      <img src="Icon.png" alt="Logo" class="Logo">
    </a>
  </div>
  <ul>
    <li><a href="Donate.html">Donate Now</a></li>
    <li><a href="ContactUs.html">Contact Us</a></li>
    <li><a href="OurCampaigns.html">Our Campaigns</a></li>
    <li><a href="AboutUs.html">About Us</a></li>
    <li class="dropdown">
      <a href="javascript:void(0);" class="dropbtn">&#9776;</a>
      <div class="dropdown-content">
        <a href="Donate.html">Donate Now</a>
        <a href="ContactUs.html">Contact Us</a>
        <a href="OurCampaigns.html">Our Campaigns</a>
        <a href="AboutUs.html">About Us</a>
      </div>
    </li>
  </ul>
</nav>

修改后的CSS代码 #

/* General styles */
body {
  margin: 0;
  font-family: Georgia, serif;
}

li {
  display: inline;
  font-family: Georgia, serif;
  margin-right: 20px;
}

li a {
  text-decoration: none;
  color: black;
  padding: 14px 16px;
}

li a:hover {
  color: #005d6c;
}

/* Navigation styles - 改用Flex布局 */
nav {
  position: fixed;
  top: 50px;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: space-between; /* 实现Logo左、导航右的布局 */
  padding: 0 10px;
  box-sizing: border-box; /* 避免padding撑宽导航栏 */
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.Logo {
  width: 75px;
  vertical-align: middle; /* 让Logo与导航垂直居中对齐 */
}

/* Dropdown menu styles */
.dropbtn {
  display: none;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Adjustments for smaller screens */
@media only screen and (max-width: 718px) {
  nav {
    flex-direction: column; /* 切换为垂直排列，Logo在上、导航在下 */
    text-align: center;
    padding: 10px 0;
  }

  ul {
    margin-top: 10px; /* 给Logo和导航之间添加间距 */
  }

  li {
    display: block; /* 小屏幕下导航项垂直排列，若要水平布局可保留inline */
    margin-right: 0;
    margin-bottom: 8px;
  }

  /* 若不需要汉堡菜单可隐藏，需要则改为display: inline-block */
  .dropbtn {
    display: none;
  }
}

关键修改点 #

1. 把nav的Float布局替换为Flex布局，简化响应式排列的控制逻辑
2. 小屏幕断点（718px）处设置flex-direction: column，实现Logo与导航的垂直排列
3. 调整小屏幕下li的显示方式，改为block实现垂直导航（需水平则保留inline）
4. 用Flex的垂直居中替代原负margin的Logo位置调整，避免布局偏移问题
5. 可选：若保留汉堡菜单交互，可在小屏幕下隐藏原ul，仅显示.dropbtn

内容的提问来源于stack exchange，提问作者user3907