alineando a la derecha

dieguicho · #1 (**permalink**) 22/03/2008, 00:08

Estimados:

tengo el siguiente codigo html

Código HTML:

<div>
    <ul>
      <li>izquierda</li>
      <li>izquierda</li>
      <li>derecha</li>
    </ul>
</div>

necesito alinear el ultimo a la derecha..

Código HTML:

<li style="float:right">derecha</li>

y funciona... lo alinea a la derecha, pero.... en una segunda linea!

si a los dos primeros

Código HTML:

<li>

les agrego

Código HTML:

<li style="float:left">

funciona un poco mejor... pero.. el

Código HTML:

<div>

se me acorta en el alto, es como que si al hacer float:left pasara a position:relative
como puedo solucionarlo? gracias!!!!

emiliodeg · #2 (**permalink**) 22/03/2008, 00:52

agrega esto
li {display:block;width:33%}

dieguicho · #3 (**permalink**) 22/03/2008, 08:47

sucede lo mismo
para que el width??

Raulmmmm · #4 (**permalink**) 22/03/2008, 09:19

Si dices que funciona con el float: left; puedes poner esto:

Código HTML:

<div style="clear: both"></div>

antes del </ul> para que te lo meta dentro del div. Quedaría así:

Código HTML:

<div>
<ul>
<li style="float: left">Hola</li>
<li style="float: left">Hola</li>
<li style="float: right">Hola</li>
<div style="clear: both"></div>
</ul>
</div>

Mikmoro · #5 (**permalink**) 22/03/2008, 12:55

En realidad es sencillo:

<div>
<ul>
<li class="derecha">derecha</li>
<li class="izquierda">izquierda</li>
<li class="centro">izquierda</li>
</ul>
</div>

y la css:

.derecha { float: right;}
.izquierda { float: left;}

Es decir, siempre que quieras alinear algo a la derecha y en la misma línea otras cosas a su izquierda, es recomendable que primero pongas las cosas que van a la derecha y luego lo que va a su izquierda, por el flujo del documento.

Mikel.

dieguicho · #6 (**permalink**) 22/03/2008, 14:13

Mikmoro, si al div contenedor le ponemos un color de fondo cualquiera en tu ejemplo veras como se corta, el div queda por la mitad de los li probalo y me contas

Mikmoro · #7 (**permalink**) 22/03/2008, 15:28

Pues no entiendo muy bien qué quieres decir con que se corta, pero en este código no veo nada que se corte:

Cita:

<!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>dieguicho</title>
<style>
.derecha { float: right;}
.izquierda { float: left;}
li {list-style: none;
}
div {background: #aaa;
}
</style>
</head>
<body>
<div>
<ul>
<li class="derecha">Derecha</li>
<li class="izquierda">Izquierda</li>
<li class="centro">Centro</li>
</ul>
</div></body>
</html>

Sólo he puesto fondo al div y he quitado los discos de los li.
O no entiendo qué se corta o no has probado bien el código. No obstante, tampoco sé exactamente qué es lo que quieres hacer, porque esto yo nunca lo haría así. Seguro que es para algo en concreto que no imagino. Si eres más explícito creo que será más fácil.

Mikel.

dieguicho · #8 (**permalink**) 22/03/2008, 15:47

quiero hacer un encabezado con los links: productos y servicios
alineados a la izquierda y con un link mi cuenta y salir alineado a la derecha
como lo harias vos?
veo que en tu codigo creaste un li class=centro

si eliminas ese li veras a que me refiero... el div deja de contener el ul y se auto-achica, me explique mejor?? gracias!!

Mikmoro · #9 (**permalink**) 22/03/2008, 16:29

Cita:

Iniciado por dieguicho

quiero hacer un encabezado con los links: productos y servicios
alineados a la izquierda y con un link mi cuenta y salir alineado a la derecha
como lo harias vos?
veo que en tu codigo creaste un li class=centro

si eliminas ese li veras a que me refiero... el div deja de contener el ul y se auto-achica, me explique mejor?? gracias!!

Claro, pero ese li class="centro" ya estaba en el mensaje anterior, por eso decía que quizá no lo habías probado bien.

Si quieres un li alineado a la derecha y otros dos a la izquierda, pero nada más entre ellos, la mejor manera es como te decía:

1.- el de la derecha, flotado a la derecha
2.- el de más a la izquierda, flotado a la izquierda
3.- el siguiente de la izquierda (al que he llamado "centro"), sin flotar.

¿Por qué? En primer lugar porque el segundo de la izquierda (centro) no es necesario flotarlo, en segundo lugar porque de esa manera el del centro ocupa toda la línea hasta hacer tope con el de la derecha, y en tercer lugar, porque así el div crece tanto como ese li del centro, porque en FF, con los li flotados no crece.

Eso es lo que te ocurre cuando flotas los tres. Espero que te sirva.

Mikel.

dieguicho · #10 (**permalink**) 22/03/2008, 20:27

perfecto, clarisimo... muchas gracias Mikel, dejare un li vacio en el centro