如何实现三个h3元素同行且分别居左、居中、居右？

你现在的问题在于，text-align是用来对齐元素内部文本的，而非控制元素本身在父容器中的位置，单纯靠inline-block没法直接实现你要的三端对齐效果。最简洁现代的方案是用Flexbox布局，我给你调整下代码：

步骤1：给父容器添加Flex布局 #

首先给三个h3所在的父div加个类名（比如header-row），然后给这个父容器设置Flex属性：

.header-row {
  display: flex;
  justify-content: space-between; /* 关键：让子元素两端对齐，中间元素自然居中 */
  align-items: center; /* 垂直方向居中对齐，避免元素因margin不同错位 */
  width: 100%; /* 确保父容器占满页面宽度，才能实现左右贴边 */
}

步骤2：调整三个h3的样式 #

把原来的text-align属性去掉（现在不需要靠它控制位置了），同时按需调整margin，避免元素间距不符合预期：

.masthead-brand {
  font-size: 50px;
  margin: 10px 0;
  color: #3434f3;
}
.masthead-brand1 {
  font-size: 50px;
  margin: 10px 0 0;
}
.masthead-brand2 {
  font-size: 50px;
  margin: 10px 0;
  color: crimson;
}
/* 可以移除h3的inline-block，因为Flex子元素默认自带行内块特性 */
h3 {
  /* display: inline-block; 可删除 */
}

步骤3：更新HTML结构 #

给父div加上我们定义好的类：

<div class="background">
  <div class="header-row"> <!-- 新增类名 -->
    <h3 class="masthead-brand">Held </h3>
    <h3 class="masthead-brand1"> oder</h3>
    <h3 class="masthead-brand2"> Schurke?</h3>
  </div>
  <!-- 下方nav及其他内容保持不变 -->
  <nav>
    <ul class="nav masthead-nav">
      <li class="active"><a [routerLink]="['/dashboard']">Dashboard</a></li>
      <li><a routerLink="/heroes">Heroes</a></li>
      <li><a routerLink="/villains">Schurken</a></li>
    </ul>
  </nav>
  <p class="lead">
    <a href="#" class="kämpfeMethode">Kämpfe jetzt!</a>
  </p>
  <router-outlet></router-outlet>
</div>

方案说明 #

Flexbox是专门为一维布局设计的现代方案，justify-content: space-between会让父容器内的子元素：

• 第一个元素贴紧左侧
• 最后一个元素贴紧右侧
• 中间元素自动填充左右空隙的中间位置，刚好实现居中效果
  align-items: center则能让三个h3在垂直方向上对齐，避免因margin差异导致的错位问题。

如果需要兼容极老旧浏览器（如IE9及以下），也可以用position: absolute的方案，但Flexbox代码更简洁、维护性更强，是当前的首选方案。

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