Web开发：使用inline-block对齐Logo文本与导航栏

嘿，我懂你这种新手卡布局的抓狂感——inline-block听起来简单，但细节没踩对确实会掉坑里！别慌，给你两种靠谱的解决方案，保证能把「Marston」钉在左上角、导航栏稳稳待在右上角，还能完美垂直对齐～

方案1：用Flexbox（最推荐，省心不踩坑） #

现在做布局首推Flexbox，完全不用纠结inline-block的空白间隙、垂直对齐这些破事，几行代码就能搞定：

HTML结构 #

<header class="header-wrap">
  <h1 class="site-logo">Marston</h1>
  <nav class="main-nav">
    <a href="#home">首页</a>
    <a href="#about">关于</a>
    <a href="#services">服务</a>
    <a href="#contact">联系</a>
  </nav>
</header>

CSS样式 #

/* 先给全局做个基础重置，避免默认样式捣乱 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header-wrap {
  display: flex; /* 开启Flex布局 */
  justify-content: space-between; /* 让logo和导航栏分别靠左右两端 */
  align-items: center; /* 强制垂直居中对齐 */
  padding: 12px 24px; /* 给点内边距，布局不挤 */
  background-color: #fff; /* 可选，加背景色更直观 */
}

.site-logo {
  font-size: 28px;
  color: #222;
}

.main-nav a {
  margin-left: 20px; /* 导航链接之间留间距 */
  text-decoration: none;
  color: #555;
}

.main-nav a:hover {
  color: #007bff; /* 可选，加个 hover 效果更友好 */
}

为什么这个好使？
Flexbox天生就是为这种「两端对齐+垂直居中」的场景设计的，justify-content: space-between直接把两个元素推到容器的左右边缘，align-items: center则保证它们在垂直方向上完全对齐，不用再折腾任何额外属性。

方案2：inline-block的正确打开方式（解决你之前的失败问题） #

如果你非要用inline-block，那你之前大概率栽在了元素间的空白间隙和垂直对齐设置上，试试这个修正版：

HTML结构 #

<header class="header-wrap">
  <h1 class="site-logo">Marston</h1>
  <nav class="main-nav">
    <a href="#home">首页</a>
    <a href="#about">关于</a>
    <a href="#services">服务</a>
    <a href="#contact">联系</a>
  </nav>
</header>

CSS样式 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header-wrap {
  width: 100%;
  padding: 12px 24px;
  background-color: #fff;
  font-size: 0; /* 关键！消除inline-block元素之间的默认空白间隙 */
}

.site-logo {
  display: inline-block;
  font-size: 28px; /* 单独恢复logo的字体大小 */
  vertical-align: middle; /* 强制垂直居中 */
  color: #222;
}

.main-nav {
  display: inline-block;
  font-size: 16px; /* 恢复导航栏的字体大小 */
  vertical-align: middle; /* 和logo保持同一垂直位置 */
  margin-left: calc(100% - 220px); /* 这里的220px是logo的大致宽度，你可以根据实际调整 */
}

.main-nav a {
  margin-left: 20px;
  text-decoration: none;
  color: #555;
}

踩坑说明：
inline-block元素之间会因为HTML里的换行/空格产生默认间隙，给父容器设置font-size:0就能消除这个问题；同时必须给两个元素都加上vertical-align: middle，才能保证它们垂直对齐。

试试上面的方案，应该就能完美实现你想要的布局了！如果还有某个细节没调对，可以把你的具体代码贴出来，我帮你排查～

内容的提问来源于stack exchange，提问作者A. Marston