Perché non posso allineare a destra un elemento con display: blocco e larghezza: X?

Question

Totale domanda n00b qui (almeno per l'elite CSS):

Perché è che un elemento sia con display: block; e un valore per width non sembra cadere in linea con la text-align proprietà del suo genitore? Cioè, sembra sempre insistere nel mantenere la sinistra.

Here is a jsFiddle illustrating the issue.

Ovviamente, questo deve essere coerente con le specifiche CSS (voglio dire, se Chrome, Firefox e Opera tutti d'accordo su di esso, ho pochi dubbi); Semplicemente non capisco.

Answer 1

Il testo è allineato all'interno di una casella da 150px. È corretto. Un elemento di blocco non si allinea all'allineamento del testo nel genitore.

Per risolvere questo problema è necessario utilizzare display: inline-block o float: right sul div .width.

modifica: con galleggiante, aggiungere clear: right evitarlo essere sulla stessa riga del div precedente

Answer 2

È perché la classe è larghezza del blocco non larghezza. Rinomina la classe block_width e poi nel tuo css fai l'ultima .block_width invece della .width che hai e funziona

Answer 3

<span> è un elemento con display: inline. Elementi con display: inline seguendo l'allineamento del testo. Gli elementi con display: block non seguono l'allineamento del testo sono allineati PROPRIETÀ dal float.

Quando si modifica solo la larghezza dell'elemento rimane in linea, seguendo l'allineamento del testo, ma quando si modifica il display per bloccarlo e modificarne la larghezza, il suo contenuto assume l'allineamento del testo, ma l'elemento no. Ho cercato di illustrare questo con un po 'di colore nel codice;)

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