ここでの合計n00bの質問(少なくともCSSエリートにとって):
display: block;
との両方を持つ要素がその親width
のプロパティと一致していないように見えるのはなぜですか?text-align
つまり、常に左を維持することを主張しているようです。
明らかに、これはCSS仕様と一致している必要があります(つまり、Chrome、Firefox、Operaがすべて同意している場合、私はほとんど疑いがありません)。よくわかりません。
ここでの合計n00bの質問(少なくともCSSエリートにとって):
display: block;
との両方を持つ要素がその親width
のプロパティと一致していないように見えるのはなぜですか?text-align
つまり、常に左を維持することを主張しているようです。
明らかに、これはCSS仕様と一致している必要があります(つまり、Chrome、Firefox、Operaがすべて同意している場合、私はほとんど疑いがありません)。よくわかりません。
テキストは150pxのボックスのすぐ内側に配置されます。それは正しいです。ブロック要素は、親のtext-alignに揃えられません。
これを修正するには、display: inline-block
またはfloat: right
.widthdivで使用する必要があります。
clear: right
編集:floatを使用して、前のdivと同じ行にないように追加します
<span>
は。を持つ要素display: inline
です。display: inline
テキストの配置に従う要素。display: block
テキストの配置に従わない要素は、floatによってOWNEDに配置されます。
要素の幅を変更するだけでは、テキストの配置に従ってインラインのままになりますが、表示をブロックして幅を変更すると、コンテンツはテキストの配置を想定しますが、要素は想定しません。私はあなたのコードでこれをいくつかの色で説明しようとしました;)
これは、クラスが幅ではなくブロック幅であるためです。クラスの名前をblock_widthに変更してから、cssで最後のクラスを.widthではなく.block_widthにして、機能します
別の方法
<div style="text-align:right; margin:0px auto 0px auto;">
<p> Hello </p>
</div>
<div style="">
<p> Hello </p>
</div>