css h1 - solo larga quanto il testo

Question

Ho uno stile H1 per il mio sito:

.centercol h1 { 
    color: #006bb6; 
    font-weight: normal; 
    font-size: 18px; 
    padding:3px 3px 3px 6px; 
    border-left:3px solid #c6c1b8; 
    background:#f2efe9; 
    display:block; 
} 

Il colore di sfondo copre l'intera larghezza della centercol, 500px ...

Come faccio fai in modo che questo H1 si estenda solo sulla larghezza del testo dell'H1?

Answer 1

È possibile utilizzare uno <span> anziché uno <h1>.

Answer 2

Questo perché il tuo <h1>è la larghezza del centercol. Specificare una larghezza su <h1> e utilizzare margin: 0 auto; se lo si desidera centrare.

Oppure, in alternativa, è possibile spostare il valore <h1>, che lo renderebbe esattamente uguale al testo.

Answer 3

È possibile utilizzare il valore del blocco in linea per la visualizzazione, tuttavia in questo caso si perderà la caratteristica di blocco di h1 ossia i fratelli verranno visualizzati in linea con h1 se sono elementi in linea (nel qual caso è possibile utilizzare una linea -break
).

display:inline-block; 

Answer 4

È possibile utilizzare display:inline-block per forzare questo comportamento

Answer 5

Un po 'come gli altri suggerimenti è possibile utilizzare il seguente codice. Tuttavia, se si va al margine: 0 auto; percorso mi consiglia di avere il margine per la parte superiore e inferiore di un H1 essere impostato su qualcosa di diverso da 0. Quindi, forse margine: 6px auto; o qualcosa.

.centercol h1{ 
    display: inline-block; 
    color: #006bb6; 
    font-weight: normal; 
    font-size: 18px; 
    padding:3px 3px 3px 6px; 
    border-left:3px solid #c6c1b8; 
    background:#f2efe9; 
    display:block; 
} 

Answer 6

una soluzione semplice per questo è di galleggiare vostro elemento H1 sinistra:

.centercol h1{ 
    background: #F2EFE9; 
    border-left: 3px solid #C6C1B8; 
    color: #006BB6; 
    display: block; 
    float: left; 
    font-weight: normal; 
    font-size: 18px; 
    padding: 3px 3px 3px 6px; 
} 

ho messo insieme un semplice esempio jsfiddle che mostra l'effetto del "float: left" style della larghezza del vostro elemento H1 per chi cerca una risposta più generico:

http://jsfiddle.net/zmEBt/1/

Answer 7

Usa display: table!
Non interrompe il crollo dei margini come display: inline-block o float: left.

Answer 8

align-auto-start, allineare-auto-centro ... in FlexBox

.centercol h1{ 
    background: #F2EFE9; 
    border-left: 3px solid #C6C1B8; 
    color: #006BB6; 
    display: block; 
    align-self: center; 
    font-weight: normal; 
    font-size: 18px; 
    padding: 3px 3px 3px 6px; 
}