Css 两个标题在同一行

Question

初学者质疑，但我怎样才能将两个标题放在同一行？

我已经尝试过使用 display:inline-block, span。 浮动不能使它们内联并彼此靠近。

有人可以帮助我吗？

Answer 1

flex 显示类型就是为此而设计的。 首先，您需要一个 flex 容器，它将标题保存在里面。 这应该有 CSS 属性display: flex 。

然后，使用标题，您可以使用flex css 属性来指定它们在该行中应该有多少空间。 如果两者都有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

您可以使用浮点数，如我的示例所示。

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

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