establecer ancho dinámico con solo CSS?

Question

Tengo un título (h1) centrado en la página. Quiero agregar líneas a la izquierda y a la derecha del título, de modo que llenen el resto del ancho de la página. Sin embargo, quiero que las líneas se adapten al ancho del título, que es dinámico. Entonces, quiero que el ancho de la línea se calcule dinámicamente.

He aquí un ejemplo de lo que estoy tratando de lograr: http://jsfiddle.net/cAEqE/1/

En el ejemplo que puse ancho de las líneas al 35% para que pudieran obtener el efecto que quiero. Sin embargo, si el título es más largo, se dividirá en 2 líneas, y no quiero que eso suceda.

Mi jefe me dijo que evitara javascript, por lo que sería excelente usar solo CSS. Sin embargo, si esto resulta imposible, recurriré a la buena jQuery. ¡Salud!

Editar: el sitio web tiene una imagen de fondo, por lo que no puedo usar un fondo en la h1. ¡Gracias!

Answer 1

Usted puede escribir así:

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> 

Marque esta http://jsfiddle.net/cAEqE/27/

ACTUALIZADO

Marque esta http://jsfiddle.net/cAEqE/63/

Answer 2

En lugar de utilizar div s de las líneas, se debe utilizar una imagen de fondo en la matriz div.

Por ejemplo, el código HTML sería mucho más simple:

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

Y tu CSS sería:

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; 
} 

he robado un poco de este código de Jira, que hace basically what you're after.