在同一行中引用两个标题

Question

乞丐问题，但我如何将两个标题放在同一行上？

我已经尝试使用显示：内联块，跨度。 浮点不能使它们内联并彼此靠近。

有人可以帮助我吗？

Answer 1

柔性显示类型就是为了做到这一点。首先，您需要一个灵活的容器，它将在里面保存标题。这应该具有 CSS 属性display: flex。

然后，使用标头，您可以使用flexcss 属性来指定它们在该行中应具有多少空间。如果两者都有flex: 1，它们将占用相等的空间。如果一个有flex: 2而另一个有flex: 1，第一个将占据行的 2/3，第二个将占据行的 1/3。

有关flex的更多信息，您可以看到以下内容：https://www.w3schools.com/css/css3_flexbox.asp

.flex-container {
display: flex;
}
.flex-container > h1 {
flex: 1;
}

<div class="flex-container">
<h1>Heading 1</h1>
<h1>Heading 2</h1>
</div>

Answer 2

您可以使用 float，如我的示例所示。

h1 {
float:left;
/* if you want them to separate add some margins */
margin-right: 10vw;
}

<h1>Heading A</h1>
<h1>Heading B</h1>