Foros del Web » Creando para Internet » HTML »

Problema con listas nestadas inline

Estas en el tema de Problema con listas nestadas inline en el foro de HTML en Foros del Web. Hola Estoy intentando crear dos listas dentro de una lista. Los elemento de la lista superior tienen el atributo "inline" y de cada uno ellos ...
  #1 (permalink)  
Antiguo 06/08/2011, 10:58
 
Fecha de Ingreso: noviembre-2010
Mensajes: 15
Antigüedad: 6 años, 5 meses
Puntos: 0
Problema con listas nestadas inline

Hola

Estoy intentando crear dos listas dentro de una lista. Los elemento de la lista superior tienen el atributo "inline" y de cada uno ellos pende una lista normal. Pretendo que se vea una lista al lado de otra sin usar tablas. Sin hacer listas nestadas el código funciona, pero no consigo que funcione con listas nestadas. Alguien sabría localizar el error.

Código:
<div>

<ul style="list-style: none;">

  <!-- Columna 1 -->

  <li style="display: inline;"><span style="font-weight: bold;">TITULAR 1</span>
  
  <ul> 

        <li>Elemento 1</li>

        <li>Elemento 3</li>

        <li>Elemento 5</li>
        
  </ul></li>
   
  <!-- Columna 2 -->
     
  <li style="display: inline;"><span style="font-weight: bold;">TITULAR 2</span>
  
  <ul>

        <li>Elemento 2</li>

        <li>Elemento 4</li>

        <li>Elemento 6</li>
        
  </ul></li>
        
</ul> 

</div>
El resultado es que aparece una encima de otra, y no al lado. Esto es lo que se ve:


Código:
TITULAR 1 

Elemento 1

Elemento 3

Elemento 5



TITULAR 2 

Elemento 2

Elemento 4

Elemento 6
Muchas gracias.

Saludos.
  #2 (permalink)  
Antiguo 06/08/2011, 11:34
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 11 meses
Puntos: 1567
Respuesta: Problema con listas nestadas inline

Muy claro no me queda, pero probá con esto

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7. /*<![CDATA[*/
  8. ul.linea li {
  9. display: inline;
  10. }
  11. /*]]>*/
  12. </head>
  13. <div>
  14. <ul style="list-style: none;"><!-- Columna 1 -->
  15. <li style="display: inline;"><span style="font-weight: bold;">TITULAR 1</span>
  16. <ul class="linea">
  17. <li>Elemento 1</li>
  18. <li>Elemento 3</li>
  19. <li>Elemento 5</li>
  20. </ul>
  21. </li>
  22. <!-- Columna 2 -->
  23. <li style="display: inline;"><span style="font-weight: bold;">TITULAR 2</span>
  24. <ul class="linea">
  25. <li>Elemento 2</li>
  26. <li>Elemento 4</li>
  27. <li>Elemento 6</li>
  28. </ul>
  29. </li>
  30. </ul>
  31. </div>
  32. </body>
  33. </html>

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 06/08/2011, 12:05
 
Fecha de Ingreso: noviembre-2010
Mensajes: 15
Antigüedad: 6 años, 5 meses
Puntos: 0
Respuesta: Problema con listas nestadas inline

Cita:
Iniciado por emprear Ver Mensaje
Muy claro no me queda, pero probá con esto
Gracias por tu aporte. El resultado es una lista con otra inline nestada.

Código:
TITULAR 1

   Elemento 1 Elemento 3 Elemento 5

TITULAR 2

   Elemento 2 Elemento 4 Elemento 6
Lo siento, no me he explicado muy bien. Busco más bien esto

Código:
TITULAR1          TITULAR 2

Elemento 1       Elemento 2

Elemento 3       Elemento 4

Elemento 5       Elemento 6

Muchas gracias.
  #4 (permalink)  
Antiguo 06/08/2011, 12:58
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 11 meses
Puntos: 1567
Respuesta: Problema con listas nestadas inline

Eso ya es otra cosa



Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7. /*<![CDATA[*/
  8. div.lista {
  9. float: left;
  10. margin-right: 15px;
  11. margin-bottom: 30px;
  12. }
  13. ul {
  14. list-style: none;
  15. margin: 0px;
  16. padding: 0px;
  17. }
  18. /*]]>*/
  19. </head>
  20. <!-- Columna 1 -->
  21. <div class="lista"><span style="font-weight: bold;">TITULAR 2</span>
  22. <ul>
  23. <li>Elemento 2</li>
  24. <li>Elemento 4</li>
  25.  
  26. <li>Elemento 6</li>
  27. </ul>
  28. </div>
  29. <!-- Columna 2 -->
  30. <div class="lista"><span style="font-weight: bold;">TITULAR 2</span>
  31. <ul>
  32. <li>Elemento 2</li>
  33. <li>Elemento 4</li>
  34. <li>Elemento 6</li>
  35. </ul>
  36. </div>
  37. <div style="clear: both;"><!-- quitar el float --></div>
  38.  
  39. <div>Más contenido</div>
  40. </body>
  41. </html>

__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 06/08/2011, 14:34
 
Fecha de Ingreso: noviembre-2010
Mensajes: 15
Antigüedad: 6 años, 5 meses
Puntos: 0
Respuesta: Problema con listas nestadas inline

Veo que el código es bastante distinto a lo que pensaba.

Gracias, y disculpa por no explicarme correctamente al principio.

Saludos.

Etiquetas: inline, listas, tabla
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 19:52.