如何在HTML中让两个标题在同一行显示？

Question

我想在同一水平线上左边放一个h2标题，右边放一个h3标题。它们下面有一条水平线，我希望它们距离这条水平线的距离相等。

我尝试将它们都设为内联，并使其中一个向右浮动，另一个向左浮动。这样做的问题是 h3 比 h2 更短，垂直居中的位置是在 h2 的一半处。

h2 有点像坐在水平线上，而 h3 看起来有点像漂浮在空中。

我希望它们两个都能像坐在水平线上。

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

我在谈论如何用视觉方式描述情况。

- Aditya Sastry

---

你能最好地描述它的方式是通过代码。 - sachleen

展示一下你的代码，你尝试过什么？ - Rui Jarimba

Answer 1

你需要将这两个标题用

标签包裹起来，并使该

标签使用样式clear:both。例如：

```html

标题1

标题2

```

<div style="clear: both">
    <h2 style="float: left">Heading 1</h2>
    <h3 style="float: right">Heading 2</h3>
</div>
<hr />

在 div 标签之后放置 hr 标签，将确保它被推到两个标题的下方。

希望这有所帮助，或类似于此。

- twilson

Answer 2

你只需要执行以下其中一个：

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

您可以通过调整较小标题的height，padding或margin属性来进行位置补偿。我建议将两个标题都设置为相同的height。

点击此处查看实际示例。

（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 />​

- Jon Newmuis

---

我尝试了边距、填充等所有属性，但是我猜浮动属性一直在覆盖它们。 - Aditya Sastry

Answer 3

使用'display:inline-block'属性可以将两个标题并排显示。您可以运行此代码段来查看它。

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

- Maxim Vershinin

---

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

Answer 4

请检查我的样例解决方案。

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

这将把您的页面分成两个部分，并将两个标题元素平均插入右侧和左侧部分。

- Tibs

Answer 5

CSS中的vertical-align属性可以帮助您解决这个问题：

vertical-align: bottom;

下面是您所需的小标题样式 :)

竖直对齐

- Wampie Driessen

---

尝试过了，不起作用...垂直对齐可以在不使用float:right的情况下实现。 - Aditya Sastry

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

- ianmightknow

Answer 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>

- KargWare