如何在不破坏布局的前提下使Logo与Mount Apo文本紧密相邻？

云上老周

2026-7-18

解决方案

核心问题是header采用flex布局后，logo和文本是独立的flex项，会被justify-content: space-between强制分散开，同时你用的float在flex容器里完全不生效。只需把logo和文本包裹在一个子容器内，让这个容器作为单个flex项，就能实现两者紧密相邻，同时不破坏整体布局。

修改后的HTML

<!-- make a bar on the top and make a background image with fade in border, 
    main color theme is green reference:https://mobirise.com/extensions/charitym5/non-governmental-organization/-->
<header>
  <!-- 新增容器包裹logo和文本 -->
  <div class="brand-container">
    <img class="logo" src="https://via.placeholder.com/75" alt="logo">
    <a class="mtap">
      Mount 
      <br>
      Apo
    </a>
  </div>
  <nav>
    <ul class="nav_links">
      <li><a href="#">Services</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
  <a class="cta" href="#"><button>Contact</button></a>
</header>

修改后的CSS（仅保留关键修改，其余代码不变）

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
}

/* 新增品牌容器样式 */
.brand-container {
  display: flex;
  align-items: center; /* 让logo和文本垂直居中对齐 */
  gap: 12px; /* 控制logo与文本的间距，可按需调整 */
}

.logo {
  cursor: pointer;
  width: 100px;
  margin: 0;
}

/* 移除无效的浮动样式 */
/* .mtap a {
  float: left;
} */

/* 可选：优化文本排版 */
.mtap {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  color: #edf0f1;
  line-height: 1.2; /* 让换行后的文本间距更紧凑 */
}