Как отобразить несколько заголовков

Question

Я пытаюсь отобразить несколько заголовков на одной горизонтальной линии. Пока что я могу отобразить два из них, но третий продолжает падать по линии. Ниже приведено изображение того, как оно выглядит в настоящее время:

текущий дисплей

Текущий код для отображения заголовков:

  <header>
      <h1 class="text-sm display-3 font-weight-thin " style="text-align:center;float:left;" >Amazon</h1>
      <h1 class="text-sm display-3 font-weight-thin " style="text-align:center;float:center;">BestBuy</h1>
        <h1 class="text-sm display-3 font-weight-thin " style="text-align:right;float:right;">Target</h1> 
      <hr style="clear:all;"/> 
      </header>

Answer 1

Используя Float left и определяя ширину, мы можем легко отобразить заголовки без особой сложности кода.

<header>
      <h1 class="text-sm display-3 font-weight-thin " style=" width:30%; text-align:left; float:left;" >Amazon</h1>
      <h1 class="text-sm display-3 font-weight-thin " style=" width:40%; text-align:center; float:left;">BestBuy</h1>
      <h1 class="text-sm display-3 font-weight-thin " style="width:30%; text-align:right;float:left;">Target</h1> 
      <hr style="clear:all;"> 
</header>

Answer 2

Трюк, чтобы получить цель на той же строке, заключался в добавлении display: inline-block; к стилю каждого <h1>. Тогда проблема заключалась в центрировании BestBuy, что было сделано путем установки его на position: absolute; и центрирования на основе размера окна с left: 50%; transform: translateX(-50%);.

Окончательный рабочий код:

<header>
      <h1 class="text-sm display-3 font-weight-thin " style="text-align:left; display:inline-block" >Amazon</h1>
      <h1 class="text-sm display-3 font-weight-thin " style="position: absolute; text-align:center; left: 50%;transform: translateX(-50%); display:inline-block;">BestBuy</h1>
      <h1 class="text-sm display-3 font-weight-thin " style="text-align:right; float: right; display:inline-block">Target</h1> 
      <hr style="clear:all;"> 
</header>