Unidad 17. Estilos CSS Avanzados (XX)



 

Del mismo modo, podrás hacer que una etiqueta de bloque (como p o div) se convierta en un elemento en línea utilizando display: inline; y puedan ser mostradas una al lado de otra:

1 2 3 4
6 5 7 8
24 9 10 11
23 12 25
22 21 20 13
19 14
18 17 16 15
    
1 2 3 4
6 5 7 8
24 9 10 11
23 12 25
22 21 20 13
19 14
18 17 16 15
    
1 2 3 4
6 5 7 8
24 9 10 11
23 12 25
22 21 20 13
19 14
18 17 16 15

En este ejemplo podemos ver tres tablas que se muestran una al lado de la otra.

Simplemente les hemos dado el estilo:

.tabla { 
    display: inline;
}

Aunque si disminuyes el ancho de la ventana verás que al tratarse de elementos en línea se adaptan a su tamaño, y al final cuando no quepan, saltan de línea.

 

Para saltarnos este inconveniente (si lo fuera), podemos utilizar la propiedad que vimos en el apartado de Controles de texto: white-space.

Introduciendo estas tres tablas en un elemento de bloque como un div y asignándole la propiedad white-space: nowrap; conseguiríamos que las tres tablas permaneciesen en línea sin saltos de pantalla a pesar de la anchura de la ventana.

1 2 3 4
6 5 7 8
24 9 10 11
23 12 25
22 21 20 13
19 14
18 17 16 15
 
1 2 3 4
6 5 7 8
24 9 10 11
23 12 25
22 21 20 13
19 14
18 17 16 15
    
1 2 3 4
6 5 7 8
24 9 10 11
23 12 25
22 21 20 13
19 14
18 17 16 15

 

Comentaremos que esta propiedad también puede tomar el valor list-item.

De este modo, los elementos que se vean afectados por el estilo display: list-item; se mostrará como si formasen parte de una lista.

Observa el siguiente ejemplo:

p.lista { 
    display: list-item; 
    list-style-type: square; 
}

Si aplicamos este estilo sobre unos párrafos veremos esto:

Esto es un párrafo que se muestra en forma de elemento de lista.

Esto es un párrafo que se muestra en forma de elemento de lista.

Esto es un párrafo que se muestra en forma de elemento de lista.

Esto es un párrafo que se muestra en forma de elemento de lista.

 

Otro valor muy interesante de display es none. Esto hace desaparecer el elemento del flujo de la página, no como al usar visibilty: hidden; que lo oculta pero mantiene su espacio. Esta propiedad es muy empleada en comportamientos JavaScript.

 

Para practicar realiza el Ejercicio Paso a Paso de Controles de Bloque.

Pág. 17.20

Atrás  Inicio  Adelante







Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.