html - これら2つを同じ行に配置する方法は？(1 つは中央揃え、1 つは右揃え)

Question

2 つの異なるテキスト セットを同じ行に配置しようとしています。

<h2 style="text-align:center">Only $4 for first-class shipping on all orders!</h2><span style="text-align:right">test</span>​

私はこれらを同じ行に置こうとしています。span タグでできると思っていたのですが、そうではありません。それをdivに入れると、1行下に移動します。同じ行に必要です。

http://jsfiddle.net/MWDxC/

Answer 1

デフォルトではブロック要素であるため、そのH2タグにdisplay:inlineを配置する必要があります。

http://jsfiddle.net/MWDxC/2/

または、span タグ全体を H2 内に移動するだけでも機能します。

Answer 2

ラッピング要素が必要で、表示を変更してフロートを設定します。それはうまくいくでしょう。

<div style="text-align:center;">
  <h2 style="display:inline;" >Only $4 for first-class shipping on all orders!</h2>
  <span style="float:right; display:block;">test</span>
</div>

Answer 3

<h2>中央と<span>右側を維持したい場合- http://jsfiddle.net/MWDxC/3/

<header>
    <h2>Only $4 for first-class shipping on all orders!</h2>
    <span>test</span>
</header>

header {
    position: relative;
}

h2{
    text-align: center;
}

span {
    position: absolute;
    right: 0;
    top: 0;
}