Neden bir öğeyi ekran ile sağa hizalayamıyorum: block and width: X?

Question

Toplam n00b soru burada (en azından CSS elit kadar):

Neden hem display: block; ve width için bir değer görünmüyor sahip bir element, ebeveynin text-align özelliği doğrultusunda düşmeye olduğunu? Yani, her zaman sola devam etmekte ısrar ediyor gibi görünüyor. Açıkçası

Here is a jsFiddle illustrating the issue.

, bu CSS spec (Yani Chrome, Firefox ve Opera hepsi üzerinde hemfikir olursa, ben çok az şüphem yok) ile tutarlı olmalıdır; Gerçekten anlamadım.

Answer 1

Metin, 150px kutusunun içinde hizalanır. Bu doğru. Bir blok öğesi, üst öğedeki metin hizalamasına hizalanmaz.

Bunu düzeltmek için, .width div üzerinde display: inline-block veya float: right kullanmanız gerekir.

düzenleme: şamandıra ile, bir önceki div

Answer 2

Çünkü sınıfınız genişlik değil genişliktedir. Class block_width sınıfını yeniden adlandırın ve sonra css'inizde .withth yerine son bir .block_width yapın ve

Answer 3

<span> aynı satırda olmak önlemek için clear: right eklemek display: inline ile bir elementtir. Metin hizalamasını izleyen display: inline ile öğeler. display: block'a sahip olan öğeler, metnin hizalamasının takip edilmediği şekilde, şamandıra tarafından hizalanır.

Öğenin genişliğini değiştirdiğinizde, metnin hizalanmasını takiben satır içi kalır, ancak ekranınızı engellemek ve genişliğini değiştirmek için değiştirdiğinizde, içeriği metnin hizalanmasını varsayar, ancak öğe bunu yapmaz. ...)

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