Problema con saltos de línea en listas

kodaichi · #1 (**permalink**) 27/02/2014, 14:23

Hola, tengo un problema con los textos de unas listas.

Lo que sucede es que, necesito colocar textos mas largos en mis <li>. Entonces, lo normal sería que se creara una segunda línea debajo, y así sucede pero estas no "empujan" a los siguientes <li>.

He tratado en vano de tantear entre reglas, al final no consigo el resultado que quiero.

Estaría muy agradecido si pudiesen ayudarme con esto.

Este es mi html:

Código 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="contenedor">    
    <div id="contenedorContenido">
    	<div class="col">
        	<div class="cajaFlotante">
            	<div class="cajaFlotanteTitulo">
                	TITUTLO
                </div>
                <ol>
                	<li>
                    	<a href="http://google.com" target="_blank">
                            <span class="icono"><img src="img.jpg"></span>
                            <span class="texto">Lorem ipsum ad his scripta blandit</span>
                            <span class="link"></span>
                        </a>
                    </li>
                    <li>
                    	<a href="http://google.com" target="_blank">
                            <span class="icono"><img src="img.jpg"></span>
                            <span class="texto">Lorem ipsum ad his scripta blandit</span>
                            <span class="link"></span>
                        </a>
                    </li>
                    <li>
                    	<a href="http://google.com" target="_blank">
                            <span class="icono"><img src="img.jpg"></span>
                            <span class="texto">Lorem ipsum ad his scripta blandit</span>
                            <span class="link"></span>
                        </a>
                    </li>
                    <li>
                    	<a href="http://google.com" target="_blank">
                            <span class="icono"><img src="img.jpg"></span>
                            <span class="texto">Lorem ipsum ad his scripta blandit</span>
                            <span class="link"></span>
                        </a>
                    </li>
                    <li>
                    	<a href="http://google.com" target="_blank">
                            <span class="icono"><img src="img.jpg"></span>
                            <span class="texto">Lorem ipsum ad his scripta blandit</span>
                            <span class="link"></span>
                        </a>
                    </li>
                </ol>
            </div>			
			<div class="cajaFlotante">
            	<div class="cajaFlotanteTitulo">
                	TITULO
                </div>
                <ol>
                	<li>
                    	<a href="http://google.com" target="_blank">
                            <span class="icono"><img src="img.jpg"></span>
                            <span class="texto">Lorem ipsum ad his scripta blandit</span>
                            <span class="link"></span>
                        </a>
                    </li>
                    <li>
                    	<a href="http://google.com" target="_blank">
                            <span class="icono"><img src="img.jpg"></span>
                            <span class="texto">Lorem ipsum ad his scripta blandit</span>
                            <span class="link"></span>
                        </a>
                    </li>
                    <li>
                    	<a href="http://google.com" target="_blank">
                            <span class="icono"><img src="img.jpg"></span>
                            <span class="texto">Lorem ipsum ad his scripta blandit</span>
                            <span class="link"></span>
                        </a>
                    </li>
                    <li>
                    	<a href="http://google.com" target="_blank">
                            <span class="icono"><img src="img.jpg"></span>
                            <span class="texto">Lorem ipsum ad his scripta blandit</span>
                            <span class="link"></span>
                        </a>
                    </li>
                    <li>
                    	<a href="http://google.com" target="_blank">
                            <span class="icono"><img src="img.jpg"></span>
                            <span class="texto">Lorem ipsum ad his scripta blandit</span>
                            <span class="link"></span>
                        </a>
                    </li>
                </ol>
            </div>					
        </div>	  	 
    </div>
</div>
</div>
</body>
</html>

Aquí el CSS:

Código CSS:

Ver originalbody{
    font-family:Arial, Helvetica, sans-serif;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    background-color:#f5f5f5;
}
#fondoContenedor{
    width:100%;
    height:100%;
    margin-left:auto;
    margin-right:auto;  
}
#contenedor{
    width:100%;
    height:100%;
    margin:0 auto;  
}   
    #contenedorContenido{
        width:1200px;
        height:100%;
        padding:0px 10px 0px 10px;
        margin:20px auto;
    }   
        .col{
            width:400px;
            height:100%;
            float:left;
            display:block;                  
        }
            .cajaFlotante{
                width:378px;
                height:100%;
                margin:0px 10px 20px 10px;
                border-width:1px;
                border-color:#000;
                background-color:#FFF;
                position:relative;
            }
                .cajaFlotanteTitulo{
                    color:#FFF;
                    width:350px;
                    height:21px;
                    padding:12px 14px 9px 14px;
                    background-color:#000;
                }
                .cajaFlotante ol{
                    width:338px;
                    height:100%;
                    padding:0px 0px 0px 40px;
                    margin:16px 0px 16px 0px;
                }
                    .cajaFlotante ol li{
                        width:338px;
                        height:27px;
                        
                        position:relative;                                                      
                    }
                        .cajaFlotante ol li a{
                            text-decoration:none;
                            color:#000;
                            /*display:block;*/
                            width:298px;
                                                                                    
                            height:27px;
                            padding:3px 0px 3px 0px;
                            margin:0px 0px 0px 0px;                 
                        }
                        .cajaFlotante ol li a:hover{                            
                            color:#FF502E;                                              
                        }
                            .icono{                             
                                display:inline-block;                           
                                width:16px;
                                height:16px;                            
                            }
                            .texto{                                                                         
                                display:inline-block;                                                                                                                       
                                width:255px;
                                height:21px;                                                                    
                                padding:0px 0px 0px 21px;                                                           
                            }
                            .link{                                                                                          
                                display:inline-block;                                                           
                                width:15px;
                                height:15px;                                                            
                                background-image:url(imagenes/link_icon.jpg);                               
                            }

Saludos.

pzin · #2 (**permalink**) 28/02/2014, 03:30

Con quitarle la altura que le especificaste a los elementos de la lista debería de ser suficiente.

kodaichi · #3 (**permalink**) 28/02/2014, 13:59

Gracias Pzin!, precisamente logre solucionarlo así.

Sin embargo ahora surge otro problema, y es, como alinear verticalmente las viñetas(en este caso números) de cada item de mi lista, ya he probado con vertical-align y no funciona.