如何在html中的同一行有两个标题答案

【问题标题】：how to have two headings on the same line in html如何在html中的同一行有两个标题
【发布时间】：2012-12-31 00:49:45
【问题描述】：

我想在同一水平线上有两个标题 h2 和 h3，一个在左边，另一个在右边。他们下面有一个 HR，我希望他们与这个 HR 保持相同的距离。

我尝试将它们都设为内联，并且一个向右浮动，另一个向左浮动。这样做的问题在于 h3，因为它垂直小于 h2，它的中心是 h2 长度的一半。

h2 有点像坐在 hr 上，h3 有点像漂浮在半空中。

我有点希望他们都像坐在 hr 上一样。

h2{
display:inline;
float:left;
}
h3{
display:inline;
float:right;
}

我说的是视觉描述情况。

【问题讨论】：

最好的描述方式是代码。
给我们看一些代码，你试过什么？

标签： html css html-heading

【解决方案1】：

您需要将两个标题包装在 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 在 div 标记之后将确保它被推到两个标题之下。

或者类似的东西。希望这会有所帮助。

【讨论】：

【解决方案2】：

您只需要执行以下操作之一：

将它们都设为inline（或inline-block）
将它们设置为float左或右

您应该能够调整较小标题的height、padding 或margin 属性以补偿其定位。我建议将两个标题设置为相同的height。

请参阅此live 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 />

【讨论】：

我尝试了边距，填充了所有内容，但我猜浮动会继续覆盖它们

【解决方案3】：

显示属性“inline-block”会将两个标题彼此相邻放置。你可以运行这段代码sn -p来查看

<h1 style="display: inline-block" >Text 1</h1>
<h1 style="display: inline-block" >Text 2</h1>

【讨论】：

请添加一些关于代码的解释。

【解决方案4】：

Css 的垂直对齐属性应该可以帮助你：

vertical-align: bottom;

是您较小的标题所需要的 :)

Vertical-Align

【讨论】：

试过它不起作用..垂直对齐没有浮动：正确

【解决方案5】：

检查我的示例解决方案

<h5 style="float: left; width: 50%;">Employee: Employee Name</h5>
<h5 style="float: right; width: 50%; text-align: right;">Employee: Employee Name</h5>

这会将您的页面一分为二，并将两个页眉元素平等地插入左右部分。

【讨论】：

【解决方案6】：

以下代码将允许您在同一行上有两个标题，第一个左对齐，第二个右对齐，并具有将两个标题保持在同一基线上的额外优势。

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);
}

【讨论】：

【解决方案7】：

在h1 元素内添加带有style="float: right" 元素的span。因此，您可以添加一个带有 unicode 箭头链接按钮的“转到页面顶部”链接。

<h1 id="myAnchor">Headline Text
<span style="float: right"><a href="#top" aria-hidden="true">↥</a></span>
</h1>

【讨论】：