如何让导航栏铺满页面宽度并在小屏幕时切换为按钮？

我来帮你搞定这两个需求，咱们直接针对你的代码调整，一步步解决问题：

一、让导航栏铺满屏幕宽度 #

首先要解决默认布局的边距和宽度限制问题，你需要做这些调整：

• 去掉body的默认外边距，避免导航栏两侧留白
• 给导航容器设置width: 100%，确保它撑满整个屏幕宽度
• 把导航栏的内容区域设置为弹性布局，方便后续元素排列

二、添加小屏幕折叠按钮 #

需要新增一个汉堡按钮元素，默认在大屏下隐藏，小屏幕时显示；同时通过CSS媒体查询控制菜单的显示/隐藏，再用简单的JS实现点击按钮切换菜单的功能。

修改后的完整代码 #

HTML部分

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Navbar</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav class="navbar">
    <!-- 新增折叠按钮 -->
    <button class="nav-toggle" id="navToggle">☰</button>
    <div class="nav-links" id="navLinks">
      <a href="#" class="nav-link">Home</a>
      <a href="#" class="nav-link">About</a>
      <a href="#" class="nav-link">Services</a>
      <a href="#" class="nav-link">Contact</a>
    </div>
  </nav>

  <script>
    // 点击按钮切换菜单显示状态
    const navToggle = document.getElementById('navToggle');
    const navLinks = document.getElementById('navLinks');
    
    navToggle.addEventListener('click', () => {
      navLinks.classList.toggle('active');
    });
  </script>
</body>
</html>

CSS部分

/* 重置默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
}

/* 全屏导航栏样式 */
.navbar {
  width: 100%;
  background-color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-link {
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
}

.nav-link:hover {
  color: #ffd700;
}

/* 折叠按钮默认隐藏 */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
}

/* 小屏幕响应式设置 */
@media (max-width: 768px) {
  .nav-toggle {
    display: block;
  }
  
  .nav-links {
    /* 默认隐藏菜单 */
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: #333;
    flex-direction: column;
    padding: 1rem 2rem;
    gap: 1rem;
    display: none;
  }
  
  /* 激活状态显示菜单 */
  .nav-links.active {
    display: flex;
  }
}

关键修改说明 #

1. 全屏导航栏：通过*选择器重置默认内外边距，给.navbar设置width: 100%和弹性布局，确保它铺满整个屏幕宽度，同时去掉body的默认margin避免留白。
2. 响应式折叠：
   • 新增nav-toggle按钮，默认用display: none隐藏
   • 使用媒体查询@media (max-width: 768px)，在屏幕宽度小于768px时显示按钮，同时把菜单改成垂直布局并默认隐藏
   • 用JS给按钮添加点击事件，通过切换active类来控制菜单的显示和隐藏

这样就能完美实现你想要的两个效果啦！

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