如何将网站Navbar从单行改为双行并实现响应式布局？

要实现你想要的居中布局且具备响应式的导航栏，推荐使用Flexbox布局来构建，它能轻松实现空间分配和响应式适配，避免手动调整margin/padding带来的问题。以下是完整的实现代码：

HTML结构 #

<nav class="navbar">
  <div class="navbar-container">
    <!-- 左侧Logo区域 -->
    <div class="navbar-logo">
      <a href="/">网站Logo</a>
    </div>
    <!-- 中间导航链接 -->
    <ul class="navbar-links">
      <li><a href="/home">首页</a></li>
      <li><a href="/services">服务</a></li>
      <li><a href="/about">关于我们</a></li>
      <li><a href="/contact">联系我们</a></li>
    </ul>
    <!-- 右侧操作按钮 -->
    <div class="navbar-actions">
      <button class="btn btn-primary">登录</button>
      <button class="btn btn-secondary">注册</button>
    </div>
    <!-- 移动端汉堡菜单按钮 -->
    <button class="navbar-toggle" aria-label="切换导航菜单">
      <span></span>
      <span></span>
      <span></span>
    </button>
  </div>
</nav>

CSS样式 #

/* 基础样式重置，消除默认边距和样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

.navbar {
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 可选：添加阴影增强层次感 */
  padding: 0.8rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 100; /* 保持导航栏在页面顶部 */
}

.navbar-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  width: 100%;
}

/* 左侧Logo固定宽度 */
.navbar-logo a {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333333;
}

/* 中间导航链接居中，占据剩余空间 */
.navbar-links {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 2rem; /* 导航项之间的间距 */
}

.navbar-links a {
  color: #555555;
  font-size: 1rem;
  transition: color 0.3s ease;
}

.navbar-links a:hover {
  color: #007bff; /* 鼠标悬停时的颜色 */
}

/* 右侧操作按钮固定宽度 */
.navbar-actions {
  display: flex;
  gap: 1rem;
}

.btn {
  padding: 0.5rem 1.2rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.btn-primary {
  background-color: #007bff;
  color: #ffffff;
}

.btn-secondary {
  background-color: #f8f9fa;
  color: #333333;
  border: 1px solid #dee2e6;
}

/* 移动端响应式适配（屏幕宽度≤768px时生效） */
.navbar-toggle {
  display: none;
  flex-direction: column;
  background: transparent;
  border: none;
  cursor: pointer;
}

.navbar-toggle span {
  width: 25px;
  height: 3px;
  background-color: #333333;
  margin: 3px 0;
  transition: 0.3s;
}

@media (max-width: 768px) {
  /* 移动端导航链接转为垂直布局，默认隐藏 */
  .navbar-links {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    flex-direction: column;
    padding: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: none;
  }

  /* 点击汉堡按钮后显示导航菜单 */
  .navbar-links.active {
    display: flex;
  }

  /* 显示汉堡按钮 */
  .navbar-toggle {
    display: flex;
  }

  /* 移动端隐藏右侧操作按钮（可根据需求调整为放入折叠菜单） */
  .navbar-actions {
    display: none;
  }
}

关键说明 #

1. Flexbox布局：通过flex:1让中间导航链接区域占据剩余空间，配合justify-content:center实现导航项居中，彻底解决手动调边距的混乱问题。
2. 响应式适配：通过媒体查询在移动端将导航菜单折叠，使用汉堡按钮控制显示/隐藏，适配不同屏幕尺寸。
3. 可定制性：你可以根据需求修改颜色、字体大小、间距、按钮样式等参数，匹配网站整体风格。

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