Ancho de encabezados (H1, H2, etc.)

Question

Quiero que mis encabezados (h1 a h6) tengan un color de fondo (diferente del fondo de la página), también quiero que el ancho de este fondo sea el mismo que el ancho del texto en el encabezado, más relleno (no el ancho del contenedor en el que se encuentra el encabezado, que es lo que está sucediendo ahora).

No tiene mucho sentido que te muestre ningún código ya que es bastante simple (¡o debería serlo de todos modos!). El contenedor tiene un ancho fijo. En este momento tengo solo algunos márgenes, relleno, color de fondo y conjunto de estilos de fuente para las etiquetas h1, h2, h3, etc.

EDIT: Creo que el código ayudaría! https://web.archive.org/web/20090724165158/http://adriantrimble.com/headers (esto tiene la solución de Gerald aplicada, aunque obviamente esto aún no funcionaría en IE6/7 y todavía tiene problemas en los navegadores más nuevos). Uso de la pantalla: en línea causa más problemas de los que soluciona, usando float: left and clear: left como se mencionó tiene problemas debido a la distribución de 2 columnas. Gracias por ayudar a todos hasta ahora.

Answer 1

me gustaría utilizar

#rightcol h1, #rightcol h2, #rightcol h3, #rightcol h4, #rightcol h6, #rightcol h6 { 
    float:left; 
    clear:left; 
} 
#rightcol p {clear:left;} 

---

edición después comentario

Si el div que contiene está flotando, el claro no borrará el collado izquierdo. Así que flotan rightcol izquierda y eliminar el margen

#rightcol { 
    float:left; 
    padding:70px 20px 20px 0px; 
    width:585px; 
} 

Answer 2

h1-h6 son elementos de nivel de bloque e incluso si no están en un contenedor (o solo cuerpo) se extenderán sobre el ancho de la ventana. Una solución consiste en cambiar su pantalla para que sea inline-block en su lugar:

<h1 style="background-color:pink; display:inline-block; padding:1em;">Testheader</h1> 

Tenga en cuenta que usted tendría que hacer un salto manual después de la cabecera si el siguiente elemento no es un elemento en bloque, como p.

Answer 3

una etiqueta de cabecera (h1-h6) es un elemento a nivel de bloque y por lo tanto llena la anchura del contenedor que está en. Si lo cambia a

display:inline 

traerá el fondo en sólo la anchura de la texto. Sin embargo, esto introducirá otros problemas (ya que los elementos en línea no se comportan como elementos de bloque de muchas otras maneras).

La alternativa es establecer un ancho para el encabezado en sí. Si quieres ser realmente complicado, puedes hacerlo con javascript para que lo calcule específicamente para cada encabezado.

Tendrá que jugar un poco y descubrir qué funciona en su situación.

Answer 4

como otros mencionaron display:inline-block; sería una opción, pero no funciona en todos los broswers. lo que podría pensar en este momento es dar a los encabezados de una y el elemento float:left; que sigue a un clear:left;

otra manera - no tan limpio - es añadir luces alrededor del texto de su título, y darle que se extiende por un color de fondo:

<h1><span>your text</span></h1> 

h1 span { background-color:#369; } 

Answer 5

Mi solución fue poner un lapso dentro del h1 y el estilo el lapso en su lugar.

Answer 6

Otra forma de agregar un color de fondo a un elemento de encabezado que solo es tan ancho como su texto (sin usar elementos adicionales o propiedades de visualización) es usar el selector de primera línea de CSS;

Ejemplo:

h1:first-line { 
background-color: yellow; 
} 

Answer 7

Si desea que su hxh1, h2, h3, etc. tengan lo mismo con el texto como en ella, podría intentar

h1 { 
    display:table; 
} 

Doesn' t romper colapso de margen como display: inline-block o float: left.

Ver fragmento:

#page { 
 
    background-color: #ededed; 
 
    height: 300px; 
 
} 
 
h1 { 
 
    display: table; 
 
    background-color: #10c459; 
 
    padding: 10px; 
 
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; 
 
    color: #fff; 
 
    font-size: 24px; 
 
    font-weight: 700; 
 
}

<div id="page"> 
 
    <h1>Hello world</h1> 
 
</div>