35

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

在此处输入图像描述

我试过这个，但没有成功

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

我究竟做错了什么？

4

6 回答 6

41

原始答案（仍然可以正常工作）

请参阅此 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; }

2020 更新

请参阅使用 flexbox 的替代CodePen。

inline-block您可以将标头设置为flex容器，而不是将 h1 设置为 an 。一个 flex 容器将（默认情况下）在水平轴上布局其子级。请注意，您还需要align-items: center将 h1 和 span 保持在同一垂直轴上。

另外，请注意，align-items: baseline如果您希望文本出现在同一基线上（如我的原始答案），您可能需要。

header {
  display: flex;
  align-items: center;

  /* Remove the next line if you want the span to appear next to the h1 */
  justify-content: space-between;

  border-bottom: 1px solid #000;
  padding: 10px 30px;
}
于 2012-11-02T11:55:18.170 回答
6

I came up with a simple solution. My requirements are slightly different in that I want my status right aligned.

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

Example

Check out this plunk.

于 2014-09-15T15:19:00.253 回答
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>

演示

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

于 2012-11-02T11:51:54.200 回答
1

尝试

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

反而？

于 2012-11-02T11:53:16.167 回答
1

有两种方法可以实现 H1 和 TEXT 内联。澄清一下，TXT 在一个元素容器中。您建议使用 DIV，但任何语义元素都可以。下面，h1 和 p 说明了一个常见用法，同时表明您不需要使用 DIV 来隐藏元素阻塞（尽管 div 对许多 javascript 编码人员来说很流行）。

方法一

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

方法二

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>
于 2019-06-14T20:56:24.357 回答
0

我认为你应该这样写：-

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

演示

即使您也可以使用此方法和最小化标记：-演示

于 2012-11-02T12:08:16.807 回答