将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

见this 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

添加此行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>

DEMO

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

Answer 3

我提出了一个简单的解决方案。我的要求略有不同，因为我希望我的状态正确对齐。

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;
}

例

看看这个plunk。

Answer 4

尝试

<div style="float:left;"><h1>Header</h1></div>
<div style="float:right;">Regular Text Goes Here</div>

代替？

Answer 5

我想你应该这样写： -

HTML

<div style="border-bottom:1px solid black; overflow:hidden;"> 
<h1>Header</h1>
<div class="right">Regular Text Goes Here</div>
</div>

CSS

h1 {
float:left;
  margin:0px;
  padding:0;
}
.right {
float:right;
  margin:0px;
  padding:0px;
}

DEMO

即使您可以使用这种方法，也可以使用最小化的标记： - DEMO