Html 将H1标题和普通文本对齐在同一行中

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

我已经试过了，但是没有成功

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

标题
这里是常规文本

---

我做错了什么？

添加这一行

边框底部：1px solid\000

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

标题
这里是常规文本

使用类名而不是内联样式。

试试看

<div style="float:left;"><h1>Header</h1></div>
<div style="float:right;">Regular Text Goes Here</div>

标题
这里是常规文本

相反？

原始答案（仍然可以正常工作） 看

其思想是使

内联，以允许第二个文本位于同一行

HTML:

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

2020年更新 请参见使用flexbox的示例

您可以将标题设置为

flex

容器，而不是将h1设置为

内联块。flex容器（默认情况下）将在水平轴上布局其子容器。请注意，您还需要对齐项目：居中以使h1和跨度保持在同一垂直轴上

另外，请注意，如果希望文本显示在同一基线上（如我的原始答案），您可能需要对齐项目：基线

标题{
显示器：flex；
对齐项目：居中；
/*如果希望跨距显示在h1旁边，请删除下一行*/
证明内容：之间的空间；
边框底部：1px实心#000；
填充：10px 30px；
}
我认为你应该这样写：-

HTML

<div style="border-bottom:1px solid black; overflow:hidden;"> 
<h1>Header</h1>
<div class="right">Regular Text Goes Here</div>
</div>


即使您也可以将此方法用于最小化标记：-
我想出了一个简单的解决方案。我的要求略有不同，因为我希望我的状态正确对齐

HTML
例子
看看这个。
有两种方法可以实现H1和文本内联。为了澄清，TXT在元素容器中。您建议使用DIV，但任何symantic元素都可以。下面，h1和p演示了一个常见用法，同时显示了您不需要使用DIV来隐藏元素阻塞（尽管DIV对于许多javascript程序员来说是流行的）

方法1

.inline { display: inline; float: left; padding-right: 2rem; }
<h5 class="inline">Element a's link family...</h5>
<p class="inline">

.inline{display:inline；float:left；padding right:2rem；}
元素a的链接族。。。


方法2

h5 { display: inline-block; float: left; font-size: 1rem; line-height: 1rem; margin-right: 2rem; }
h5>p { display: inline-block; float: right; }
<h5>Title</h5>
<p>Paragraph</p>

h5{显示：内联块；浮点：左；字体大小：1rem；行高：1rem；右边距：2rem；}
h5>p{显示：内联块；浮点：右；}
标题
段落

链接现在已失效如果您只想修改此特定标题，您可以将样式内联为
.my-header h2 { 
  display: inline;
}
.my-header span { 
  float: right;
}

.inline { display: inline; float: left; padding-right: 2rem; }
<h5 class="inline">Element a's link family...</h5>
<p class="inline">

h5 { display: inline-block; float: left; font-size: 1rem; line-height: 1rem; margin-right: 2rem; }
h5>p { display: inline-block; float: right; }
<h5>Title</h5>
<p>Paragraph</p>