Html 如何显示多个标题

我试图在同一水平线上显示多个标题。到目前为止，我能够显示其中的两个，但第三个一直在下降。以下是它当前外观的图像：

显示标题的当前代码：

  <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>

亚马逊
百思买
目标

将目标放在同一行的诀窍是添加

显示：内联块

到每个

的样式。 然后，问题变成了百思买，将其设置为

位置：绝对并根据窗口大小将其居中，
左：50%；转化：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>


亚马逊
百思买
目标

通过使用Float left并定义宽度，我们可以轻松显示标题，而无需太多复杂的代码



亚马逊
百思买
目标

此屏幕截图或HTML中没有太多内容。我怀疑
display-3
类在这里很重要，但谁知道呢？有问题的代码只产生了一个很小的示例请注意，
标记不使用，也不需要结束斜杠，而且在HTML中从来没有。在屏幕截图中，“Best Buy”一词也没有正确对齐，也许考虑改变你的字体大小？@ B.OSS我尝试缩小字体大小，但目标仍然显示在线下。当我移除目标h1标签时，百思买将被联合。