css h1 - solamente tan amplia como el texto

tengo un estilo H1 para mi sitio:css h1 - solamente tan amplia como el texto

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

El color de fondo se extiende por todo el ancho de la centercol, 500px ...

¿Cómo puedo hacer que este H1 solo abarque el ancho del texto del H1?

Fuente

2010-12-30 tony noriega

-4

Puede usar <span> en lugar de <h1>.

Fuente

2010-12-30 20:41:04 zsalzbank

Esto es porque su <h1>es el ancho del centercol. Especifique un ancho en el <h1> y use margin: 0 auto; si lo quiere centrado.

O, como alternativa, podría hacer flotar el <h1>, lo que lo haría exactamente igual de ancho que el texto.

Fuente

2010-12-30 20:41:27 JakeParis

Si puedo especificar una anchura, a continuación, una etiqueta H1 con más texto se ajustará, correcto? –

@tony revisa mi edición. – JakeParis

Puede usar el valor de bloque en línea para mostrar, sin embargo, en este caso perderá la característica de bloque de h1, es decir, los hermanos se mostrarán alineados con h1 si son elementos en línea (en ese caso puede usar una línea) -break
).

display:inline-block;

Fuente

2010-12-30 20:43:44 Chandu

+18

También podría intentar 'display: table;' De esta manera no necesitará usar un salto de línea. –

para aquellos que se preguntan cómo establecer un ancho de blockquote (que tendría que caber a la izquierda de una imagen) use display: block; desbordamiento: oculto – JinSnow

Puede utilizar display:inline-block para forzar este comportamiento

Fuente

2010-12-30 20:43:52 Keith

-1

Algo así como las otras sugerencias que puede utilizar el siguiente código. Sin embargo, si vas al margen: 0 auto; ruta Recomiendo que el margen para la parte superior e inferior de un H1 se establezca en algo distinto de 0. Entonces, quizás margen: 6px auto; o algo.

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

Fuente

2010-12-30 20:46:33

Una solución fácil para esto es para flotar el elemento H1 restante:

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

He reunido un ejemplo sencillo jsFiddle que muestra el efecto de la "float: left" estilo de la anchura de su elemento H1 para aquellos que buscan una respuesta más genérica:

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

Fuente

2012-08-13 16:04:06 William

uso display: table!
No rompe el colapso de margen como display: inline-block o float: left.

Fuente

2016-01-13 14:46:30

-1

align-autoencendido, alinee-auto-centro ... en 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; 
}

Fuente

2017-09-06 20:04:24 voguess

Tu respuesta es incompleta, ni siquiera explicaste qué es flexbox –

css h1 - solamente tan amplia como el texto

Respuesta

Cuestiones relacionadas