如何显示多个标题答案

【问题标题】：How to display multiple headers如何显示多个标题
【发布时间】：2019-10-02 02:43:32
【问题描述】：

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

当前显示标题的代码：

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

【问题讨论】：

此屏幕截图或 HTML 内容不多。我怀疑display-3 类在这里很重要，但谁知道呢？
有问题的代码产生了一个最小的例子
请注意，<hr> 标签不使用也不需要结束斜杠，并且在 HTML 中从来没有。
您的屏幕截图中的“Best Buy”字样也没有正确对齐，是否考虑更改字体大小？
@B.Oss 我尝试减小字体大小，但目标仍然显示在该行下方。当我删除 Target h1 标签时，BestBuy 会对齐。

标签： html vue.js

【解决方案1】：

通过使用向左浮动并定义宽度，我们可以轻松地显示标题，而无需太多复杂的代码。

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

【讨论】：

【解决方案2】：

让 Target 进入同一行的技巧是将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>

【讨论】：