用 display: flex 可实现 logo 和导航栏并排，关键在于 header 设为 flex 容器、子元素同级嵌套、清除默认间距，并配合 flex-wrap 和媒体查询适配移动端。

头部标志（logo）和导航栏并排显示，不是靠“浮动”或“绝对定位”硬凑出来的，而是用现代 CSS 的 display: flex 一行代码就能稳住布局 —— 但很多人卡在父容器没设宽、子元素没设对齐方式、或者 HTML 结构嵌套错位上。

为什么 <header> 里 logo 和 nav 总是上下堆叠？

浏览器默认把块级元素（比如 <div>、<nav>）垂直堆叠。即使你把 <img> 和 <nav> 写在同一行，它们仍是两个独立块，不会自动并排。

• 检查是否漏了给 <header> 或包裹容器加 display: flex
• 确认 <nav> 没被意外设成 display: block 或 width: 100%（会强制换行）
• 避免用 <table> 或多层 <div> 套娃来“模拟”并排 —— 语义错、维护难、响应式崩溃

用 flex 实现并排的最小可行写法

不需要框架、不依赖 JS，纯 HTML + CSS 就能搞定。关键就三步：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• HTML 中让 logo 和 nav 同级，都放在 <header> 下：

  <header>
    <img src="logo.png" alt="Logo">
    <nav>
      <a href="#home">首页</a>
      <a href="#about">关于</a>
    </nav>
  </header>

• CSS 只写一句：

  header { display: flex; align-items: center; }

  （align-items: center 让 logo 和文字垂直居中对齐）
• 如果 nav 文字挤在一起，加 nav a { margin-left: 1rem; } 控制间距；别用 <br> 或空格硬调

移动端一缩就错位？记得加 @media 断点

桌面端并排很稳，但手机屏一窄，nav 文字就换行或溢出 —— 这不是 flex 失效，而是没告诉它“窄了该怎么收”。

立即学习“前端免费学习笔记（深入）”；

• 默认 flex 容器是 flex-wrap: nowrap，内容超宽就会横向溢出，看不见
• 加一句 @media (max-width: 768px) { header { flex-direction: column; } }，小屏自动变上下排列
• 更优解：用 flex-wrap: wrap + nav { flex: 1; }，让 nav 自适应剩余宽度，logo 固定，不抢空间

真正容易被忽略的是：logo 图片没设 height 或 max-height，导致在高 DPI 屏或缩放时撑开整个 header；还有 <nav> 里用了 <ul><li> 却忘了清掉 margin 和 padding，视觉上还是错位 —— 这些细节比“怎么并排”更能决定最终效果是否干净。