如何将h1和文本放在同一行的标题中，而不使用内联HTML

Question

我刚开始使用HTML并且基本上只是尝试一下。所以我发现了一些（很多很多）stackoverflow，人们想知道同样的事情，我发现有很多人使用内联和我的想法，如果有一种方法可能没有内联，我没有来任何答案，我在这里！

我试过这么做：

.right {
    float: right;
}

<header>
    <h1>Left Text</h1>
    <span class="right">Right Text</span>
</header>
    

并且结果非常糟糕我会说

Picture of how it looks like

任何人都有任何想法？

Answer 1

HTML中的

<h1>标记默认为display: BLOCK元素，因此它始终带有一个新行。如果您希望<span>标记显示在同一行，只需将<h1>标记显示更改为内联。

<h1 style="display: inline;"> Left Text </h1>

Answer 2

您可以使用flex：

＆＃13;

＆＃13;

header {
  display: flex;
  align-items:center;
  justify-content:space-between;
}

＆＃13;

<header>
  <h1> Left Text </h1>
  <span class="Right"> Right Text</span>
</header>

＆＃13;

＆＃13;

＆＃13;