Html 如何在html的同一行上有两个标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14096292/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to have two headings on the same line in html
提问by Aditya Sastry
I want to have two headings h2 and h3 on the same horizontal rule one on the left and the other on the right. They have a HR underneath them and I want them to be at the same distance from this HR.
我想在同一条水平线上有两个标题 h2 和 h3，一个在左边，另一个在右边。他们下面有一个 HR，我希望他们与这个 HR 保持相同的距离。
I tried making them both inline and have one float right and the other left. The problem with doing so was with h3 as it is smaller than h2 vertically it was centered at half the h2's length.
我试着让它们都内联，让一个向右浮动，另一个向左浮动。这样做的问题在于 h3，因为它在垂直方向上小于 h2，它以 h2 长度的一半为中心。
h2 was kinda like sitting on the hr and h3 kinda looked like floating in mid air.
h2 有点像坐在 hr 上，h3 有点像漂浮在半空中。
I kinda wanted them to be like both sitting on the hr.
我有点希望他们像坐在 hr 上一样。
h2{
display:inline;
float:left;
}
h3{
display:inline;
float:right;
}
I was talking about visually describing the situation.
我说的是从视觉上描述情况。
回答by twilson
You'd need to wrap the two headings in a divtag, and have that div tag use a style that does clear: both. e.g:
您需要将两个标题包装在一个div标签中，并让该 div 标签使用clear: both. 例如：
<div style="clear: both">
<h2 style="float: left">Heading 1</h2>
<h3 style="float: right">Heading 2</h3>
</div>
<hr />
Having the hrafterthe divtag will ensure that it is pushed beneath both headers.
具有hr后的div标签将保证它被推两个标题下。
Or something very similar to that. Hope this helps.
或与此非常相似的东西。希望这可以帮助。
回答by Jon Newmuis
You should only need to do one of:
您应该只需要执行以下操作之一：
- Make them both
inline(orinline-block) - Set them to
floatleft or right
- 使它们都
inline（或inline-block） - 将它们设置为
float左侧或右侧
You should be able to adjust the height, padding, or marginproperties of the smaller heading to compensate for its positioning. I recommend setting both headings to have the same height.
您应该能够调整height，padding或margin更小的航向的特性来弥补它的定位。我建议将两个标题设置为具有相同的height.
See this live jsFiddlefor an example.
有关示例，请参阅此实时 jsFiddle。
(code of the jsFiddle):
（jsFiddle的代码）：
CSS
CSS
h2 {
font-size: 50px;
}
h3 {
font-size: 30px;
}
h2, h3 {
width: 50%;
height: 60px;
margin: 0;
padding: 0;
display: inline;
}?
HTML
HTML
<h2>Big Heading</h2>
<h3>Small(er) Heading</h3>
<hr />?
回答by Wampie Driessen
The Css vertical-align property should help you out here:
Css vertical-align 属性应该可以帮助你：
vertical-align: bottom;
is what you need for your smaller header :)
是你的小标题所需要的:)
回答by Tibs
Check my sample solution
检查我的示例解决方案
<h5 style="float: left; width: 50%;">Employee: Employee Name</h5>
<h5 style="float: right; width: 50%; text-align: right;">Employee: Employee Name</h5>
This will divide your page into two and insert the two header elements to the right and left part equally.
这会将您的页面分成两部分，并将两个标题元素均等地插入到左右部分。
回答by ianmightknow
The following code will allow you to have two headings on the same line, the first left-aligned and the second right-aligned, and has the added advantage of keeping both headings on the same baseline.
以下代码将允许您在同一行上有两个标题，第一个左对齐，第二个右对齐，并且具有将两个标题保持在同一基线上的额外优势。
The HTML Part:
HTML部分：
<h1 class="text-left-right">
<span class="left-text">Heading Goes Here</span>
<span class="byline">Byline here</span>
</h1>
And the CSS:
和 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);
}
回答by KargWare
Add a spanwith the style="float: right"element inside the h1element. So you can add a "goto top of the page" link, with a unicode arrow link button.
添加一个span与style="float: right"元素内的h1元素。所以你可以添加一个“转到页面顶部”链接，带有一个 unicode 箭头链接按钮。
<h1 id="myAnchor">Headline Text
<span style="float: right"><a href="#top" aria-hidden="true">?</a></span>
</h1>
