> Faqs > Elementos de listas LI en la misma línea

Elementos de listas LI en la misma línea

Quiero hacer una cosa especial con listas.

¿Podría conseguir que los desplazamientos entre los elementos de las listas sean dentro de la misma línea, es decir, que no se haga el salto de línea entre elementos LI?

Respuestas

Simplemente has de definir el estilo float:left; en el elemento de la lista, así: <span class="codigo">

<li style="float:left;">Elemento</li>

Aunque luego para que quede bien la lista posiblemente necesites definir otros atributos CSS.

<ul> <li style="float:left; width:120px; padding-left: 10px;">Elemento 1</li> <li style="float:left; width:120px; padding-left: 10px;">Elemento 2</li> <li style="float:left; width:120px; padding-left: 10px;">Otra cosa</li> <li style="float:left; width:120px; padding-left: 10px;">Esta lista li es de varios elementos por línea</li> <li style="float:left; width:120px; padding-left: 10px;">Más</li> <li style="float:left; width:120px; padding-left: 10px;">Lo que sea</li> </ul>

</span> Tenemos varios artículos con ejemplos de atributos CSS que se pueden aplicar a listas para generar diversos tipos de listas útiles. Explora nuestro taller de CSS para encontrarlos.

Miguel Angel
3310 147 216 17