2012-05-07 5 views
8

総N00B質問(少なくともCSSのエリートへ):?要素をdisplay:blockとwidth:Xで右寄せできないのはなぜですか?ここ

なぜそれがdisplay: block;widthのための値の両方を持つ要素は、その親のtext-align性質を持つラインに落ちるようには見えないということですかつまり、常に左に守ることを主張するようです。明らかに

Here is a jsFiddle illustrating the issue.

(クロム、FirefoxとOperaは、すべて私は非常に少し疑問を持って、それに同意する場合は、私が意味する、)、これは、CSSの仕様と一致していなければなりません。私は本当にそれを取得していません。

答えて

10

テキストは150pxボックスの内側に整列されています。それは正しいです。ブロック要素は、親のテキスト整列に揃えられません。

これを修正するには、.width divにdisplay: inline-blockまたはfloat: rightのいずれかを使用する必要があります。

編集:前のdiv

+2

@Danをhttp://jsfiddle.net/Z6Twf/2/国境はそれを明確にするを参照してください。私はあなたのコード内のいくつかの色でこれを説明しようとしました。 –

+0

と修正プログラム:http://jsfiddle.net/8L8he/ – michaelward82

0

あなたのクラスは幅ではなくブロック幅であるからです。クラスの名前をblock_widthに変更し、CSSの最後の.block_widthを作成してください。

0

<span>display: inlineを持つ要素であるとしてフロートと、同じライン上にある、それを避けるためにclear: rightを追加します。テキスト整列の後のdisplay: inlineの要素。 display: blockの要素は、テキストのアライメントに従わず、浮動小数点ではなくOWNEDになります。

要素の幅を変更すると、テキストの配置後にインラインのままですが、表示をブロックして幅を変更すると、その内容はテキストの配置が想定されますが、要素は変更されません。 ...)

http://jsfiddle.net/Z6Twf/3/

関連する問題