时间戳

首页 > 解决方案 > h3 s 与同一行之间有空格

css - h3 s 与同一行之间有空格

问题描述

嗨，我有三个 h3（标头品牌 0-2）

现在我在互联网上看到显示内联块使它们位于同一行，但我的想法是将它们放在同一行并在其间留有空格：标头在网站的左角，标头 1 在中心，并且masthead2 位于网站的右上角。我该怎么做？

.masthead-brand {
  text-align: left;
  font-size: 50px;
  margin-right: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #3434f3;
}

.masthead-brand1 {
  text-align: center;
  font-size: 50px;
  margin-right: 30px;
  margin-top: 10px;
  margin-bottom: 0px;
}

.masthead-brand2 {
  text-align: right;
  font-size: 50px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: crimson;
}

h3 {
  display: inline-block;
}
<div class="background">

  <div>
    <h3 class="masthead-brand">Held </h3>
    <h3 class="masthead-brand1"> oder</h3>
    <h3 class="masthead-brand2"> Schurke?</h3>
  </div>
  
  <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>

标签： css

解决方案

只需将任何类添加到 h3' 包装器 div：

<div class="wrapper">
   <h3 class="masthead-brand">Held</h3>
   <h3 class="masthead-brand1">oder</h3>
   <h3 class="masthead-brand2">Schurke?</h3>
</div>

并使其灵活：

.wrapper {
  display: flex;
  justify-content: space-between;
}

推荐阅读