css - 要素をdisplay：blockおよびwidth：Xで右揃えできないのはなぜですか？

Question

ここでの合計n00bの質問（少なくともCSSエリートにとって）：

display: block;との両方を持つ要素がその親widthのプロパティと一致していないように見えるのはなぜですか？text-alignつまり、常に左を維持することを主張しているようです。

明らかに、これはCSS仕様と一致している必要があります（つまり、Chrome、Firefox、Operaがすべて同意している場合、私はほとんど疑いがありません）。よくわかりません。

score 16 · Accepted Answer

テキストは150pxのボックスのすぐ内側に配置されます。それは正しいです。ブロック要素は、親のtext-alignに揃えられません。

これを修正するには、display: inline-blockまたはfloat: right.widthdivで使用する必要があります。

clear: right編集：floatを使用して、前のdivと同じ行にないように追加します

score 1 · Accepted Answer

<span>は。を持つ要素display: inlineです。display: inlineテキストの配置に従う要素。display: blockテキストの配置に従わない要素は、floatによってOWNEDに配置されます。

要素の幅を変更するだけでは、テキストの配置に従ってインラインのままになりますが、表示をブロックして幅を変更すると、コンテンツはテキストの配置を想定しますが、要素は想定しません。私はあなたのコードでこれをいくつかの色で説明しようとしました;）

score 0 · Accepted Answer

これは、クラスが幅ではなくブロック幅であるためです。クラスの名前をblock_widthに変更してから、cssで最後のクラスを.widthではなく.block_widthにして、機能します

score 0 · Accepted Answer

別の方法

<div style="text-align:right; margin:0px auto 0px auto;">
<p> Hello </p>
</div>
  <div style="">
<p> Hello </p>
</div>

4 に答える 4