In CSS, qual è un modo migliore di forzare un'interruzione di riga dopo un elemento piuttosto che renderla un elemento di blocco?

Question

Ho un'intestazione H3 che mi piacerebbe avere uno stile con un particolare colore di sfondo, ma senza che lo sfondo dell'elemento occupi tutta la larghezza dell'elemento genitore. Visto che H3 è di default un elemento di blocco, il mio stile sarebbe necessario modificare l'elemento ad un elemento inline-block, o solo un elemento in linea in linea in questo modo:

h3 { 
    background-color: #333; 
    color: white; 
    display: inline-block; 
} 

Questo funziona bene, ma solo se è immediatamente seguito da un elemento di blocco. Non voglio cambiare il markup solo per soddisfare questo stile, quindi mi chiedevo se c'è un modo per far sì che qualsiasi elemento adiacente, indipendentemente da come viene visualizzato, inizi sulla riga successiva?

Suppongo di poter utilizzare CSS3.

Answer 1

provare questo:.

h3:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

Answer 2

display:block; 
width:auto; 

Questo renderà la larghezza il più piccola possibile (non riempie l'intero elemento padre) e farà apparire altri elementi sotto.

Answer 3

Quante volte succede che l'elemento dopo lo <h3> è un elemento in linea? (Di solito dopo un'intestazione ci dovrebbe essere come un <p>, <ul> o altri elementi di blocco, anche se questo dipende totalmente dall'Html. È prevedibile? È un'opzione per trasformare semplicemente ogni elemento che segue direttamente un <h3> in un elemento di blocco?

h3 ~ * { display: block }

l'unico altro modo che conosco per avere un blocco-elemento non prende tutto lo spazio è fluttuante, ma questo lascia un altro problema

Answer 4

Ho dovuto fare qualcosa di simile con gli oggetti nav in linea che devono essere spezzati in determinati punti. funziona?

h3:after { 
    content: "\A "; 
    line-height: 0; 
    white-space: pre; 
    display:inline-block; 
} 

Mi sembra di ricordare che IE7 ha riscontrato un problema.

Answer 5

Se non è necessario centrare H3, questo può aiutare:

h3 { 
    background-color: #333; 
    color: white; 
    display: inline-block; 
    float: left; 
    clear: left; 
} 

Answer 6

mi imbatto in questo tutto il tempo nel mio codice, di solito per div che sono inline-block'ed. Il modo migliore che ho visto è quello di forzare una nuova riga è quello di avvolgere il codice in un div aggiuntivo. Il tuo html originale ottiene la formattazione che ti aspetti e il wrapper div costringe una nuova riga.

assumendo questo è il vostro h3 styling,

h3 { 
    display: inline-block; 
} 

Poi basta avvolgerlo in un div.

<div> 
    <h3>My heading</h3> 
</div>