将H1标题和普通文本对齐在同一行

Question

我试图在同一行上有一个H1标题和常规文本,下面有一行,如下所示:

我试过这个,但都没有成功

<div style="border-bottom:1px;"> 
<div align="left"><h1>Header</h1></div>
<div align="right">Regular Text Goes Here</div>
</div>

我究竟做错了什么？

Answer 1

请参阅此CodePen.

这个想法是使<h1>内联,允许第二个文本在同一行.

HTML:

<header>
  <h1>Text</h1>
  <span>text2</span>
</header>

CSS:

header { border-bottom: 1px solid #000; }
header > h1 { display: inline-block; }
header span { margin-left: 100px; }

Answer 2

我想出了一个简单的解决方案。我的要求略有不同，因为我希望自己的身份正确。

的HTML

<div class="my-header">
    <h2>Title</h2>
    <span>Status</span>
</div>
<div style="clear:both"></div>

的CSS

.my-header h2 { 
  display: inline;
}
.my-header span { 
  float: right;
}

例

看看这个普拉克。

Answer 3

添加这一行border-bottom:1px solid #000

<div style="border-bottom:1px solid #000;"> 
<div align="left"><h1>Header</h1></div>
<div align="right">Regular Text Goes Here</div>
</div>

演示版

使用类名而不是内联样式。