如何编写响应式Header Navbar的HTML CSS代码？实现Logo左浮菜单右浮

下面提供两种纯CSS实现方案，均能满足Logo左对齐、菜单右对齐的需求，优先推荐更简洁现代的Flex布局方案：

方案一：Flex布局（推荐） #

Flex布局无需处理浮动塌陷问题，代码更简洁且兼容性良好。

HTML结构 #

<nav class="navbar">
  <div class="logo">
    <img src="你的Logo图片路径" alt="网站Logo">
  </div>
  <ul class="nav-menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

CSS样式 #

/* 全局重置，消除浏览器默认样式差异 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

.navbar {
  display: flex;
  justify-content: space-between; /* 让Logo和菜单分别靠左右两侧 */
  align-items: center; /* 垂直方向居中对齐元素 */
  padding: 1rem 2rem; /* 调整Navbar的内边距，控制高度和左右留白 */
  background-color: #ffffff; /* 背景色可根据需求修改 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 可选：添加阴影增强立体感 */
}

.logo img {
  height: 50px; /* 根据实际Logo尺寸调整高度 */
  width: auto; /* 保持图片原始比例 */
}

.nav-menu {
  display: flex;
  gap: 2rem; /* 菜单选项之间的间距 */
}

.nav-menu a {
  color: #333333; /* 菜单文字颜色 */
  font-weight: 500;
  transition: color 0.3s ease; /* 鼠标悬停的平滑过渡效果 */
}

.nav-menu a:hover {
  color: #007bff; /* 鼠标悬停时的文字颜色，可自定义 */
}

方案二：Float布局 #

如果需要兼容更老旧的浏览器，可以使用传统的浮动方案：

CSS样式（HTML结构同上） #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

.navbar {
  overflow: hidden; /* 清除浮动，避免容器高度塌陷 */
  padding: 1rem 2rem;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo {
  float: left; /* Logo左浮动 */
}

.logo img {
  height: 50px;
  width: auto;
}

.nav-menu {
  float: right; /* 菜单右浮动 */
  display: flex;
  gap: 2rem;
  align-items: center;
  height: 100%; /* 确保菜单垂直居中 */
}

.nav-menu a {
  color: #333333;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-menu a:hover {
  color: #007bff;
}

关键说明 #

• Flex布局通过justify-content: space-between直接实现元素的左右分布，无需额外处理浮动问题，是当前的最优方案。
• Float布局需要给父容器添加overflow: hidden来清除浮动，避免容器高度塌陷。
• 可根据需求调整padding、background-color、color等属性，匹配参考图的样式。

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