web-dev-qa-db-ja.com

htmlの同じ行に2つの見出しを付ける方法

同じ水平線上に1つは左側に、もう1つは右側に2つの見出しh2とh3が必要です。彼らの下にHRがあり、このHRから同じ距離にあることを望みます。

私はそれらを両方ともインラインにして、1つを右にフロートさせ、もう1つを左にフロートさせました。そうすることでの問題は、h3が垂直方向にh2よりも小さいため、h3の長さの半分を中心としていたことです。

h2はhrに座っているようなもので、h3は空中に浮かんでいるようなものでした。

私はそれらが両方とも時間に座っているようなものになりたかったのです。

h2{
display:inline;
float:left;
}
h3{
display:inline;
float:right;
}

私は状況を視覚的に説明することについて話していました。

htmlcsshtml-heading
16
Aditya Sastry

2つの見出しをdivタグでラップし、そのdivタグにclear: both。例えば：

<div style="clear: both">
    <h2 style="float: left">Heading 1</h2>
    <h3 style="float: right">Heading 2</h3>
</div>
<hr />

hrafterを使用すると、divタグにより、両方のヘッダーの下に確実にプッシュされます。

またはそれに非常に類似した何か。お役に立てれば。

25
twilson

次のいずれかを実行するだけで済みます。

  • 両方をinline（またはinline-block）
  • それらをfloat leftまたはrightに設定します

小さい見出しのheight、padding、またはmarginプロパティを調整して、その位置を補正できるはずです。両方の見出しに同じheightを設定することをお勧めします。

例については、この live jsFiddle を参照してください。

（jsFiddleのコード）：

[〜＃〜] css [〜＃〜]

h2 {
  font-size: 50px;
}

h3 {
  font-size: 30px;
}

h2, h3 {
  width: 50%;
  height: 60px;
  margin: 0;
  padding: 0;
  display: inline;
}​

[〜＃〜] html [〜＃〜]

<h2>Big Heading</h2>
<h3>Small(er) Heading</h3>
<hr />​
6
Jon Newmuis

Cssのvertical-alignプロパティはここで役立ちます：

vertical-align: bottom;

あなたがあなたの小さなヘッダーに必要なものです:)

垂直位置合わせ

4
Wampie Driessen

サンプルソリューションを確認する

<h5 style="float: left; width: 50%;">Employee: Employee Name</h5>
<h5 style="float: right; width: 50%; text-align: right;">Employee: Employee Name</h5>

これにより、ページが2つに分割され、2つのヘッダー要素が左右に均等に挿入されます。

3
Tibs

次のコードでは、同じ行に2つの見出し（最初の左揃えと2番目の右揃え）を使用できます。また、両方の見出しを同じベースラインに保持するという利点もあります。

HTMLパーツ：

<h1 class="text-left-right">
    <span class="left-text">Heading Goes Here</span>
    <span class="byline">Byline here</span>
</h1>

CSS

.text-left-right {
    text-align: right;
    position: relative;
}
.left-text {
    left: 0;
    position: absolute;
}
.byline {
    font-size: 16px;
    color: rgba(140, 140, 140, 1);
}
1
ianmightknow