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向左并定义宽度，我们可以轻松显示Headers，而无需花费太多代码。

<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

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

如何显示多个标题

2 个答案: