在同一行中匹配H1标题和正常文本 [英] Align H1 Header and Normal Text in Same Line

问题描述

我想在同一行上有一个H1标题和常规文本，其下有一行，如下所示：

I'm trying to have a H1 header and regular text on the same line, with a line under it, like so:

我试过了，但是已经失败了

I have tried this, but have been unsuccessful

<div style="border-bottom:1px;"> 
<div align="left"><h1>Header</h1></div>
<div align="right">Regular Text Goes Here</div>
</div>

我做错了什么？

推荐答案

请参阅此CodePen 。

这个想法是让< h1> 内联，以允许第二个文本在同一行。

The idea is to make the <h1> inline, to allow the second text to be at the same line.

HTML ：

<header>
  <h1>Text</h1>
  <span>text2</span>
</header>

CSS：

header { border-bottom: 1px solid #000; }
header > h1 { display: inline-block; }
header span { margin-left: 100px; }

这篇关于在同一行中匹配H1标题和正常文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！