Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Lista con elementos multilinea

Estas en el tema de Lista con elementos multilinea en el foro de CSS en Foros del Web. Buenas, Estoy intentando crear una lista con 5 columnas. Resulta que el contenido de alguna de las opciones no cabe en una línea. Al crearse ...
  #1 (permalink)  
Antiguo 01/06/2014, 02:28
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 22 años, 10 meses
Puntos: 4
Lista con elementos multilinea

Buenas,
Estoy intentando crear una lista con 5 columnas. Resulta que el contenido de alguna de las opciones no cabe en una línea.
Al crearse la nueva línea, las siguientes columnas también saltan de posición y no sé como controlarlo.

En la siguiente imagen se ve:


La segunda fila de la columna Fiscal debería de aparecer en la segunda fila, pero de contabilidad, tal como se muestra aquí:


El código CSS es este:
Código CSS:
Ver original
  1. section article div#arees{
  2.     width:100%;
  3.     padding-left:2%;
  4.     padding-right:2%;
  5. }
  6. section article div#arees ul#columnes{
  7.     padding:0px;
  8.     float:left;
  9.     margin:0px;
  10.     width:100%;
  11.     list-style-type:square;
  12. }
  13. section article div#arees ul#columnes li{
  14.     padding:0;
  15.     display:inline-block;
  16.     float:left;
  17.     width:20%;
  18.     font:bold .9em 'Helvetica';
  19.     padding-top:1%;
  20. }
  21. section article div#arees ul#columnes li a
  22.     {padding:0;
  23.     display:inline;
  24.     float:left;
  25.     width:100%;
  26.     font:bold .8em 'Helvetica';
  27.     text-decoration:none;
  28.     margin-right:1%;
  29. }
  30. section article div#arees ul#columnes li a:hover{
  31.     text-decoration:underline;
  32. }

Y el código HTML este:
Código HTML:
Ver original
  1. <ul id="columnes">
  2.     <li>CONTABILIDAD</li>
  3.     <li>FISCAL</li>
  4.     <li>JURÍDICO</li>
  5.     <li>LABORAL</li>
  6.     <li>PERSONAL</li>
  7.     <li><a href="#">-cm-Estudio, Organización</a></li>
  8.     <li><a href="#">-fi-12</a></li>
  9.     <li><a href="#">-ju-13</a></li>
  10.     <li><a href="#">-la-14</a></li>
  11.     <li><a href="#">-pe-15</a></li>
  12.     <li><a href="#">-cm-Contabilidad de Sociedades,</a></li>
  13.     <li><a href="#">-fi-Información</a></li>
  14.     <li><a href="#">-ju-23</a></li>
  15.     <li><a href="#">-la-24</a></li>
  16.     <li><a href="#">-pe-25</a></li>
  17. </ul>

Muchas gracias
__________________
Qué fácil cuando lo sabes y qué difícil cuando no
  #2 (permalink)  
Antiguo 01/06/2014, 13:43
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 22 años, 10 meses
Puntos: 4
Respuesta: Lista con elementos multilinea

Y en el caso que las columnas tengan diferente número de líneas, cómo indicarlo?
Quizás sería más adecuado, en este caso, una tabla en lugar de una lista?

Gracias
__________________
Qué fácil cuando lo sabes y qué difícil cuando no
  #3 (permalink)  
Antiguo 01/06/2014, 23:22
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 9 meses
Puntos: 306
Respuesta: Lista con elementos multilinea

Tal como decis, las Tablas son para estos casos, de datos tabulados.
Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #4 (permalink)  
Antiguo 02/06/2014, 04:44
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 22 años, 10 meses
Puntos: 4
Respuesta: Lista con elementos multilinea

Muchas gracias C2am
__________________
Qué fácil cuando lo sabes y qué difícil cuando no

Etiquetas: contenido, elementos, hover, html, lista, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:21.