我想在同一水平规则上有两个标题 h2 和 h3 一个在左边，另一个在右边。他们下面有一个 HR，我希望他们与这个 HR 保持相同的距离。
我试着让它们都内联，一个浮动，另一个浮动。这样做的问题在于 h3，因为它垂直小于 h2，它以 h2 长度的一半为中心。
h2有点像坐在hr上，h3有点像漂浮在半空中。
我有点希望他们都像坐在 hr 上一样。
h2{
display:inline;
float:left;
}
h3{
display:inline;
float:right;
}
我说的是视觉上描述情况。
您需要将两个标题包装在一个div标签中，并让该 div 标签使用clear: both. 例如：
<div style="clear: both">
<h2 style="float: left">Heading 1</h2>
<h3 style="float: right">Heading 2</h3>
</div>
<hr />
拥有hr after标签将div确保它被推到两个标题下方。
或与此非常相似的东西。希望这可以帮助。
您只需要执行以下操作之一：
inline（或inline-block）float左侧或右侧您应该能够调整较小标题的height、padding或margin属性以补偿其定位。我建议将两个标题设置为相同的height.
有关示例，请参见此实时 jsFiddle。
（jsFiddle的代码）：
CSS
h2 {
font-size: 50px;
}
h3 {
font-size: 30px;
}
h2, h3 {
width: 50%;
height: 60px;
margin: 0;
padding: 0;
display: inline;
}
HTML
<h2>Big Heading</h2>
<h3>Small(er) Heading</h3>
<hr />
显示属性“inline-block”会将两个标题彼此相邻放置。您可以运行此代码段来查看它
<h1 style="display: inline-block" >Text 1</h1>
<h1 style="display: inline-block" >Text 2</h1>检查我的示例解决方案
<h5 style="float: left; width: 50%;">Employee: Employee Name</h5>
<h5 style="float: right; width: 50%; text-align: right;">Employee: Employee Name</h5>
这会将您的页面分成两部分，并将两个标题元素平等地插入到右侧和左侧部分。
下面的代码将允许您在同一行上有两个标题，第一个左对齐，第二个右对齐，并具有将两个标题保持在同一基线上的额外优势。
HTML部分：
<h1 class="text-left-right">
<span class="left-text">Heading Goes Here</span>
<span class="byline">Byline here</span>
</h1>
和CSS：
.text-left-right {
text-align: right;
position: relative;
}
.left-text {
left: 0;
position: absolute;
}
.byline {
font-size: 16px;
color: rgba(140, 140, 140, 1);
}
span在style="float: right"元素内添加一个h1元素。因此，您可以添加一个带有 unicode 箭头链接按钮的“转到页面顶部”链接。
<h1 id="myAnchor">Headline Text
<span style="float: right"><a href="#top" aria-hidden="true">↥</a></span>
</h1>