Блог

Главная - Вопросы по программированию - h3 с пробелами между и в той же строке

h3 с пробелами между и в той же строке

#css

#css

Вопрос:

Привет, у меня есть три h3 (топовый бренд 0-2)

теперь я увидел в Интернете, что встроенный блок отображения помещает их в одну строку, но моя идея заключалась в том, чтобы поместить их в одну строку И иметь пробелы между ними: masthead находится в левом углу веб-сайта, masthead1 находится в центре, а 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>

Комментарии:

1. Можете ли вы предоставить соответствующий html

Ответ №1:

Просто добавьте любой класс в 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;
}

Комментарии:

1. Почему бы не сделать «оболочку» h3 и использовать span для разных слов? Таким образом, роботы все еще понимают его содержимое.

Ответ №2:

Семантически неправильно использовать 3 отдельных заголовка.

Вам лучше использовать один заголовок и форматировать его содержимое.

Здесь я сделал это с помощью span элементов. Позиционирование выполняется с помощью flex . Flex предлагает свойство для обоснования своего содержимого так, как вам это нужно:

 .masthead-brand {
    color: #3434f3;
}
    
.masthead-brand1 {
}
    
.masthead-brand2 {
    color: crimson;
}
    
h3 {
    display: flex;
    justify-content: space-between;
}
h3 span {
    display: block;
}  
 <h3>
    <span class="masthead-brand">Held</span>
    <span class="masthead-brand1">oder</span>
    <span class="masthead-brand2">Schurke?</span>
</h3>