Problema con listas nestadas inline

user69 · #1 (**permalink**) 06/08/2011, 10:58

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.

emprear · #2 (**permalink**) 06/08/2011, 11:34

Muy claro no me queda, pero probá con esto

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
ul.linea li {
display: inline;
}
/*]]>*/
</style>
</head>
<body>
<div>
<ul style="list-style: none;"><!-- Columna 1 -->
<li style="display: inline;"><span style="font-weight: bold;">TITULAR 1</span>
<ul class="linea">
<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 class="linea">
<li>Elemento 2</li>
<li>Elemento 4</li>
<li>Elemento 6</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

Saludos

user69 · #3 (**permalink**) 06/08/2011, 12:05

Cita:

Iniciado por emprear

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.

emprear · #4 (**permalink**) 06/08/2011, 12:58

Eso ya es otra cosa

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
div.lista {
float: left;
margin-right: 15px;
margin-bottom: 30px;
}
ul {
list-style: none;
margin: 0px;
padding: 0px;
}
/*]]>*/
</style>
</head>
<body>
<!-- Columna 1 -->
<div class="lista"><span style="font-weight: bold;">TITULAR 2</span>
<ul>
<li>Elemento 2</li>
<li>Elemento 4</li>
 
<li>Elemento 6</li>
</ul>
</div>
<!-- Columna 2 -->
<div class="lista"><span style="font-weight: bold;">TITULAR 2</span>
<ul>
<li>Elemento 2</li>
<li>Elemento 4</li>
<li>Elemento 6</li>
</ul>
</div>
<div style="clear: both;"><!-- quitar el float --></div>
 
<div>Más contenido</div>
</body>
</html>

user69 · #5 (**permalink**) 06/08/2011, 14:34

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

Gracias, y disculpa por no explicarme correctamente al principio.

Saludos.