技术求助：如何让Burger menu与logo同行且下拉菜单显示在header下方？

云上老周

2026-6-26

解决汉堡菜单与Logo并排显示的问题

核心方案：用Flexbox实现横向布局

新手最容易踩的坑是没给父容器设置正确的布局属性，直接用Flexbox就能快速实现并排效果。

1. 正确的HTML结构

把Logo和汉堡菜单放在同一个父容器内（比如<header>或<nav>）：

<header class="site-header">
  <a href="/" class="site-logo">MyLogo</a>
  <button class="burger-btn">☰</button>
</header>

2. 关键CSS代码

通过Flexbox让子元素横向排列，同时控制对齐方式：

/* 全局样式重置，避免默认边距干扰布局 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.site-header {
  display: flex;
  align-items: center; /* 让Logo和菜单垂直居中 */
  padding: 15px 20px;
  background-color: #fff;
}

.site-logo {
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
  /* 如果想让菜单紧挨着Logo，加右边距 */
  margin-right: 20px;
}

.burger-btn {
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  color: #333;
}