Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a CSS que contiene a CSS: display run-in

Datos de búsqueda

CSS: display run-in

Para casos en los que el principio de un párrafo tenga importancia suficiente para ser un encabezado (h1h6) en lugar de un mero strong.

¿Qué hacer para que un encabezado y un párrafo situado a continuación (p) aparezcan al mismo nivel (en la misma línea del texto)?

Definir una regla CSS con display: run-in;. Tiene la pega de funcionar solamente en Opera (probado en la versión 9.10), y parece ser que funciona de mala manera en Safari 1.3.2, y de muy mala manera en Internet Explorer 5.2 de Mac, lo que indica que su uso no es muy recomendable.

El código XHTML utilizado es el siguiente (yo he utilizado un h2, pero valen todos):

<h2>A run-in heading.</h2>
<p>And a paragraph of text that follows it.</p>

Aplicar la regla display con el valor run-in al encabezado, con el siguiente código CSS:

h2 {display: run-in;}
h2:after{content: ". ";} /*para no tener que incluir el punto en el encabezado*/
p {background:lime; margin-left:20px;
width:200px; display:block;}/*Para darle forma al ejemplo*/

Viendo el resultado la caja del encabezado queda insertada en la del párrafo, cosa que no ocurre si la regla aplicada al párrafo (la última de todas) se aplicase al encabezado.

Ver ejemplo.

Referencias y enlaces relacionados

Compartir este artículo:

  • Compartir en del.icio.us
  • Compartir en Technorati
  • Añadir a Google Bookmarks
  • Compartir en Google Buzz

Datos del artículo:

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Todavía no hay comentarios.

Los comentarios están cerrados.

Información del sitio