imposta larghezza dinamica con solo CSS?

Question

Ho un titolo (h1) centrato sulla pagina. Voglio aggiungere linee a sinistra ea destra del titolo, in modo che riempiano il resto della larghezza della pagina. Tuttavia, voglio che le linee si adattino alla larghezza del titolo, che è dinamica. Quindi, voglio che la larghezza della linea sia calcolata dinamicamente.

Ecco un esempio di quello che sto cercando di realizzare: http://jsfiddle.net/cAEqE/1/

Nell'esempio ho impostato la larghezza delle linee al 35% in modo da poter ottenere l'effetto che voglio. Tuttavia, se il titolo è più lungo, si romperà in 2 righe e non voglio che ciò accada.

Il mio capo mi ha detto di evitare javascript, quindi sarebbe eccellente usare solo CSS. Tuttavia, se questo risulta impossibile, passerò al buon vecchio jQuery. Cheers!

Modifica: il sito Web ha un'immagine di sfondo, quindi non posso usare uno sfondo su h1. Grazie!

Answer 1

Si può scrivere in questo modo:

CSS

h1 { 
    font-size: 26px; 
    text-align:center; 
    display:inline-block; 
    *display:inline;/* For IE7*/ 
    *zoom:1;/* For IE7*/ 
    background:#fff; 
    padding:0 10px; 
} 

#title { 
    text-align:center; 
    border-bottom:1px solid #97999C; 
    height:10px 
} 

HTML

<div id="title"> 
    <h1>TITLE TEST</h1> 
</div> 

Scegli questa http://jsfiddle.net/cAEqE/27/

AGGIORNATO

Scegli questa http://jsfiddle.net/cAEqE/63/

Answer 2

Invece di usare div s per le linee, si dovrebbe usare un'immagine di sfondo sul genitore div.

Ad esempio, l'HTML sarebbe molto più semplice:

<div id="content"> 
    <h1>TITLE TEST</h1> 
</div>​ 

E il vostro CSS sarebbe:

h1 { 
    font-size: 26px; 
    background-color: white; 
    display:inline; 
    padding:0 30px; 
} 

#content { 
    text-align:center; 
    width:100%; 
    background:transparent url(https://jira.atlassian.com/s/en_UKtovngv/725/4/1.0/_/images/mod_header_bg.png) repeat-x left center; 
    margin:0; 
    padding:0; 
} 

ho rubato un po 'di questo codice da Jira che fa basically what you're after.