[SOLUCIONADO] menu en ccs

mperez2689 · #1 (**permalink**) 27/05/2013, 13:56

Hola, me gustaría que me ayudaran en el siguiente tema:

Tengo un menú horizontal echo con listas con un tamaño de un 100%, actualmente tiene tres pestañas con un padding en % para que quede centrado y me cubra el tamaño del menú, cuando le agrego una cuarta opción el menú crece hacia abajo y yo quisiera que creciera hacia la derecha, osea que el padding entre las pestañas disminuya. ¿Como podría lograr esto?

Agradezco la ayuda que me puedan brindar.

reifting · #2 (**permalink**) 27/05/2013, 14:26

Serias tan amable de poner el codigo fuente de tu menu...

mperez2689 · #3 (**permalink**) 28/05/2013, 11:57

Hola, gracias por acudir en mi ayuda jeje.
Aquí le envío el código de muestra

Codigo html

<!DOCTYPE html>
<html>
<head>
<title>Prueba Menu</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">SHOP</a></li>
<li><a href="#">TU CUENTA</a></li>
<li><a href="#">CONÓCENOS</a></li>
</ul>
</div>
</body>
</html>

Estilo en ccs

.menu{
width: 50%;
}
.menu ul{
float: left;
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li{
float: left;
display: block;
margin: 0% 5% 0;
}
.menu ul li a{
text-decoration: none;
color: #777;
font-size: 24px;
}

Mi duda es si hay alguna forma de que cuando yo agregue un nuevo elemento del menu ej: <li><a href="#">CONÓCENOS</a></li> el padding del <li> disminuya para que asi el menu quede alieado a la derecha.

reifting · #4 (**permalink**) 28/05/2013, 12:28

Ammm...
Que te parece si en

.menu{
width: 50%;
}

a width le pones auto y en

.menu ul{
float: left;
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li{
float: left;
display: block;
margin: 0% 5% 0;
}

a los float le pones none...
Espero haberte ayudado
Un abrazo...

mperez2689 · #5 (**permalink**) 28/05/2013, 13:01

Hola muchas gracias por la ayuda, no era a eso a lo que me refería, pero no importa ya lo he solucionado, de todas formas Muchas Gracias.