Html 如何在同一行中同时写 h1 和 h2？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4736067/
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 write both h1 and h2 in the same line?
提问by Bruno Machado - vargero
I have a page and I want simply to make a header. This header is an <h1>text aligned to the left, and an <h2>aligned to the right, in the same line, and after them, an <hr>. My code so far look as follows (if you test it, you'll see that it's wrong):
我有一个页面，我只想做一个标题。这个标题是一个<h1>向左对齐的文本，一个<h2>向右对齐的文本，在同一行中，在它们之后是一个<hr>. 到目前为止，我的代码如下（如果你测试它，你会发现它是错误的）：
<h1 align="left">Title</h1>
<h2 align="right">Context</h2>
<hr/>
Thanks guys!
谢谢你们！
回答by Pekka
h1and h2are native display: blockelements.
h1并且h2是原生display: block元素。
Make them display: inlineso they behave like normal text.
使它们display: inline表现得像普通文本。
You should also reset the default paddingand marginthat the elements have.
您还应该重置默认值padding和margin元素具有的默认值。
回答by Floern
Keyword float:
关键字float:
<h1 style="text-align:left;float:left;">Title</h1>
<h2 style="text-align:right;float:right;">Context</h2>
<hr style="clear:both;"/>
回答by nam
In many cases,
在很多情况下，
display:inline;
is enough.
足够。
But in some cases, you have to add following:
但在某些情况下，您必须添加以下内容：
clear:none;
回答by r_zelazny
Put the h1and h2in a container with an id of containerthen:
将h1andh2放入一个容器中，id 为containerthen：
#container {
display: flex;
justify-content: space-beteen;
}
回答by Glen
In answer the question heading (found by a google search) and not the re-question To stop the line breaking when you have different heading tags e.g.
在回答问题标题（通过谷歌搜索找到）而不是重新问题当你有不同的标题标签时停止换行，例如
<h5 style="display:inline;"> What the... </h5><h1 style="display:inline;"> heck is going on? </h1>
Will give you:
会给你：
What the... heck is going on?
到底他妈发生了什么？
and not
并不是
What the... heck is going on? (stack wont let me line break lol...anyway hope u get idea.
到底他妈发生了什么？（堆栈不会让我换行大声笑...无论如何希望你有想法。
回答by Bob
<h1 style="text-align: left; float: left;">Text 1</h1>
<h2 style="text-align: right; float: right; display: inline;">Text 2</h2>
<hr style="clear: both;" />
Hope this helps!
希望这可以帮助！
