Lista <ul> en columnas

daniph · #1 (**permalink**) 22/11/2005, 16:01

Hola a todos

¿Alguien sabe si es posible crear una lista (con ul y li), que despliegue sus items en columnas? Algo asi:

- 1º Item - 2º Item - 3º Item
- 4º Item - 5º Item - 6º Item
- 7º Item - 8º Item - 9º Item
........... etc...

Gracias a todos

baccxus · #2 (**permalink**) 22/11/2005, 16:12

Usa la función display:inline para la etiqueta <li>

Código:

.class li {
display: inline
}

Código HTML:

<ul class="class">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>

Saludos

daniph · #3 (**permalink**) 22/11/2005, 16:20

Mmmm... no se muestran.... he probado con otros valores de display y tampoco...

baccxus · #4 (**permalink**) 22/11/2005, 16:30

Estás usando una DTD que valide tu página?, si no es así, coloca esto al principio de tu código y borra la etiqueta <html>:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

daniph · #5 (**permalink**) 22/11/2005, 16:37

Ya lo tenia colocado...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

baccxus · #6 (**permalink**) 22/11/2005, 16:46

Ah... tienes que darle un ancho, porque sino tomará todo el renglón.

.class li {
display: inline;
width: 100px;
}

daniph · #7 (**permalink**) 22/11/2005, 16:58

Que va, no hay forma, te digo lo que tengo:
En el archivo style.css
.class li {display: inline; width: 500px}

En el archivo html:
<ul class="class">
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
<li>Cinco</li>
<li>Seis</li>
</ul>

Mi intencion es que los muestre de tres en tres...

baccxus · #8 (**permalink**) 22/11/2005, 17:01

bueno si es así, dále un display:block; y float:left y bájale el tamaño al width

daniph · #9 (**permalink**) 22/11/2005, 17:08

Que va, creo que sera mejor que utilice una tabla...

Muchas gracias por tu ayuda

Un saludo

baccxus · #10 (**permalink**) 22/11/2005, 17:20

pon tu página y buscamos una solución

daniph · #11 (**permalink**) 22/11/2005, 17:26

no está aun online...

RoQ · #12 (**permalink**) 22/11/2005, 17:39

Cita:

Iniciado por daniph

Que va, no hay forma, te digo lo que tengo:
En el archivo style.css
.class li{display: inline; width: 500px}

borra el espacio entre el li y la llave {