Como muestro una lista en posición horizontal?

Css | Escrito por Ezequiel M. | marzo - 10 - 2009 | 2 Comentarios

Eliminar subrayado de links

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