Yo uso etiquetas <span> en mis títulos de módulo, p. Ej.ancho de CSS de <span> etiqueta
<span>Categories</span>.
que especificar el color de fondo/imagen de la envergadura, anchura y altura en css.
Pero el ancho del tramo depende de su contenido/texto.
Por lo tanto, si hago <span></span>, con solo una imagen de fondo/color en css, no aparece nada.
Por supuesto, quiero que aparezca algo.
¿Cómo puedo resolver esto?
Podría establecer explícitamente la propiedad de visualización para "bloquear", por lo que se comporta como un elemento de nivel de bloque, pero en ese caso, probablemente debería utilizar un div en su lugar.
<span style="display:block; background-color:red; width:100px;"></span>
gracias, ya veo. eso sucede porque span está en línea. ahora veo la diferencia apuesta. pantallas en línea y bloque. sí, div es apropiado. D ... gracias –
Usando un DIV dentro de los párrafos, los encabezados (h1, h2, etc.) romperían la validación si eso te importa. Otra posible solución es usar un tramo, pantalla: bloque; y flotar: izquierda; :) –
gracias, y la respuesta a continuación fue fundamental para obtener el ancho de – Angela
No se puede especificar el ancho de un elemento con visualización en línea. Podrías poner algo en él como un espacio sin interrupciones ( ) y luego establecer el relleno para darle un poco más de ancho, pero no puedes controlarlo directamente.
Puede usar mostrar bloque en línea pero no es ampliamente compatible.
Un truco real sería poner una imagen dentro y luego establecer el ancho de eso. Algo así como un GIF transparente de 1 píxel. No es el enfoque recomendado sin embargo.
se cambia automáticamente al estilo en línea, que no puede especificar el ancho de.
display: inline-block;
sería una buena manera, excepto IE no lo soporta
se puede, sin embargo, hack a multiple browser solution
Creo que IE admite bloque en línea desde al menos la versión 6. Creo que solo admite el bloque en línea si el elemento al que se aplica es naturalmente en línea (que es ). –
Sí, IE admite bloques en línea. Su soporte es sutilmente diferente, pero funcionaría en este caso. – thomasrutter
¡Impresionante! Comenzando a entender las diferencias reales en la pantalla: –
Utilice el atributo 'display' como en el ejemplo:
<span style="background: gray; width: 100px; display:block;">hello</span>
<span style="background: gray; width: 200px; display:block;">world</span>
Yo usaría el atributo padding. Esto le permitirá añadir un número determinado de píxeles a cada lado del elemento sin el elemento perder sus cualidades útil:
Este método solo se añadirá al relleno, por lo que si cambia la duración del contenido (de Categorías a Etiquetas, por ejemplo), el tamaño del contenido cambiará y el tamaño general del elemento también cambiará. Pero si realmente desea establecer un tamaño rígido, debe hacer lo mencionado anteriormente y usar un div.
Véase el box model para más detalles sobre el modelo de caja, contenido, relleno, márgenes, etc.
Después de haber fijado la altura y anchura que sholud dice al cómo bahave si el texto dentro de su área que se desborda.Así que agregue en el css
overflow: auto;
Al igual que en otras respuestas, inicie su período de atributos con esto:
display:inline-block;
Ahora puede utilizar acolchado más ancho:
padding-left:6%;
padding-right:6%;
Cuando se utiliza el relleno, su color se expande a ambos lados (derecha e izquierda), no solo a la derecha (como en widht).
Solo me gustaría señalar que este no es un buen uso del intervalo. Está destinado a marcar rangos cortos de contenido dentro de un todo más grande, por lo que intencionalmente no es un elemento de bloque por defecto. Para los títulos, una de las etiquetas h # sería la mejor. En su defecto, un div es usualmente mejor que un lapso. – Chuck
gracias por sus respuestas ..: D me parece un tonto q'n para empezar con.lol ... hace ya muchos años. =)) –