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>、2番目のテキストが同じ行になるようにインラインにすることです。

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アップデート

フレックスボックスを利用するこの代替CodePenを参照してください。

h1をに設定する代わりに、ヘッダーをコンテナーinline-blockにすることができます。flexフレックスコンテナは（デフォルトで）その子を水平軸にレイアウトします。align-items: centerまた、h1とスパンを同じ垂直軸上に維持する必要があることに注意してください。

また、テキストを同じベースラインに表示したい場合もあることに注意してください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

簡単な解決策を思いつきました。私の要件は、自分のステータスを正しく揃えたいという点で少し異なります。

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

例

このプランクをチェックしてください。

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