将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

Answer 6

有两种方法可以内联完成H1和TEXT。为了澄清，TXT在元素容器中。您建议使用DIV，但是任何相辅相成的元素都可以。下面的h1和p说明了一种常见用法，同时表明您不需要使用DIV来躲避元素阻塞（尽管div在许多JavaScript编码器中都是大流行的）。

方法1

.inline { display: inline; float: left; padding-right: 2rem; }
<h5 class="inline">Element a's link family...</h5>
<p class="inline">

方法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>