如何将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：

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

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

Answer 3

* {
  margin: 0;
  padding: 0;
}

header {
  display: flex;
  align-items: center;
}

.left {
  float: left;
  margin-right: 20px;
}

.Right {
  float: right;
}

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

Answer 4

我想这就是你要找的东西。

<h1>Left Text 
  <span style="float:right">Right Text</span>
</h1>