Como muestro una lista en posición horizontal?

Css | Escrito por Ezequiel M. | Marzo - 10 - 2009

Las listas tienen la propiedad Block asignada por defecto, lo que hace que se muestre una linea debajo de otra formando una lista vertical. Como podemos ver en la web, la mayoría de los menús de los sitios o blogs están posicionados horizontalmente, para lograr eso tenemos que usar el valor Inline.

Solo hay que usar la propiedad Display con el valor Inline para que nuestra lista se posicione horizontalmente. Cada elemento pasa a ser un elemento de linea lo que significa que se anidaran uno a la par de otro, cosa que no ocurre naturalmente porque son elementos de bloque.

Display:Inline, es la propiedad con el valor que tenemos que asignar las listas “LI”, no a “UL”.

Código CSS:

ul li{
display:inline;
}

Código XHTML:


Item de la lista numero 1-
Item de la lista numero 2-
Item de la lista numero 3

Resultado:

Item de la lista numero 1-
Item de la lista numero 2-
Item de la lista numero 3

Articulos relacionados:

Como elimino los Bullets de las listas? Las listas sean ordenadas o no, presentan por defecto Bullets para cada elemento LI de la misma. Muchas veces al usar muchas listas las hojas de estilos se vuelven catastróficas, por la cantidad de clases asignadas a cada una. Para eliminar los bullets hay que referirse a la etiqueta UL, no a la LI como muchos
Como elimino la sangría de una lista? Para remover sangría de una lista UL hay que eliminar los margenes y los rellenos de la misma. Las propiedades de Margin y Padding deben tener asignado un valor igual a cero, y complementariamente hay que usar el atributo de estilo de lista llamado list-style-type, con valor none. Código CSS: ul{ margin:0; padding:0; list-style-type:none; } Código XHTML: Item de la lista numero 1 Item
Como pongo color de fondo a un elemento? Definir el color de fondo para un elemento es sencillo pero hay que tener en cuenta algunos aspectos. El resultado es diferente según la propiedad Display del mismo, si el elemento es de Linea (Inline) el color solo ocupara el espacio que ocupe el mismo y si es de Bloque (Block) el color ocupara todo

Comentarios:

Sencillo y practico ejemplo, estaria bueno que en los proximos explique como hacer un menu completo. Gracias
Lo dijo Andres el 11 Marzo 2009 a las 16:17
De nada Andres,para mas adelante publicare lo que me pides. Saludos
Lo dijo admin el 11 Marzo 2009 a las 17:55