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

Question

我希望在左边的另一个水平规则上有两个标题h2和h3,另一个在右边.他们下面有人力资源,我希望他们与人力资源部门保持相同的距离.

我试着让它们都是内联的,右边有一个浮动,另一个浮动.这样做的问题是h3,因为它小于垂直方向的h2,它以h2长度的一半为中心.

h2有点像坐在小时和h3看起来像漂浮在半空中.

我有点想让他们像坐在小时一样.

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

我在谈论视觉描述情况.

Answer 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标签将保证它被推两个标题下.

或者与此非常相似的东西.希望这可以帮助.

Answer 2

你应该只需要做一个:

• 让它们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 />?

Answer 3

显示属性“inline-block”会将两个标题放置在彼此旁边。您可以运行此代码片段来查看它

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