Html 在同一行中对齐 H1 标题和普通文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13194692/
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
Align H1 Header and Normal Text in Same Line
提问by Mike
I'm trying to have a H1 header and regular text on the same line, with a line under it, like so:
我试图在同一行上有一个 H1 标题和常规文本，在它下面有一行，如下所示：
I have tried this, but have been unsuccessful
我试过这个，但没有成功
<div style="border-bottom:1px;">
<div align="left"><h1>Header</h1></div>
<div align="right">Regular Text Goes Here</div>
</div>
What am I doing wrong?
我究竟做错了什么？
回答by Matteus Hemstr?m
See this CodePen.
请参阅此 CodePen。
The idea is to make the <h1>inline, to allow the second text to be at the same line.
这个想法是使<h1>内联，允许第二个文本在同一行。
HTML:
HTML：
<header>
<h1>Text</h1>
<span>text2</span>
</header>
CSS:
CSS：
header { border-bottom: 1px solid #000; }
header > h1 { display: inline-block; }
header span { margin-left: 100px; }
回答by Jess
I came up with a simple solution. My requirements are slightly different in that I want my status right aligned.
我想出了一个简单的解决方案。我的要求略有不同，因为我希望我的状态正确对齐。
HTML
HTML
<div class="my-header">
<h2>Title</h2>
<span>Status</span>
</div>
<div style="clear:both"></div>
CSS
CSS
.my-header h2 {
display: inline;
}
.my-header span {
float: right;
}
Example
例子
Check out this plunk.
看看这个笨蛋。
回答by Sowmya
回答by cjamesm
Try
尝试
<div style="float:left;"><h1>Header</h1></div>
<div style="float:right;">Regular Text Goes Here</div>
instead?
反而？
回答by Shailender Arora
I think you should write like this :-
我认为你应该这样写：-
HTML
HTML
<div style="border-bottom:1px solid black; overflow:hidden;">
<h1>Header</h1>
<div class="right">Regular Text Goes Here</div>
</div>
CSS
CSS
h1 {
float:left;
margin:0px;
padding:0;
}
.right {
float:right;
margin:0px;
padding:0px;
}
EVEN YOU CAN USE THIS METHOD ALSO WITH MINIMIZED MARKUP:- DEMO
即使您也可以使用这种方法来最小化标记：-演示
回答by Mark Stewart
There are two methods to accomplish H1 and TEXT inline. To clarify, TXT is in an element container. You suggest DIV, but any symantic element will do. Below, h1 and p illustrate a common use, while showing that you need not hide from element blocking, using DIV's (though divs are pandemic for many javascript coders).
有两种方法可以完成 H1 和 TEXT 内联。澄清一下，TXT 位于元素容器中。您建议使用 DIV，但任何符号元素都可以。下面， h1 和 p 说明了一个常见用法，同时表明您不需要隐藏元素阻塞，使用 DIV（尽管 div 对许多 javascript 编码人员来说是流行病）。
Method 1
方法一
.inline { display: inline; float: left; padding-right: 2rem; }
<h5 class="inline">Element a's link family...</h5>
<p class="inline">
Method 2
方法二
h5 { display: inline-block; float: left; font-size: 1rem; line-height: 1rem; margin-right: 2rem; }
h5>p { display: inline-block; float: right; }
<h5>Title</h5>
<p>Paragraph</p>
