Ver Mensaje Individual
  #1 (permalink)  
Antiguo 07/06/2013, 13:09
Avatar de FantasmaFito
FantasmaFito
 
Fecha de Ingreso: junio-2007
Ubicación: Buenos Aires, Argentina
Mensajes: 118
Antigüedad: 17 años, 6 meses
Puntos: 0
Problema con padding responsive

Hola, tengo el siguiente código HTML:

Código HTML:
<nav id="main_nav">
    <a href="#">LINK 1</a>
    <a href="#">LINK 2</a>
    <a href="#">LINK 3</a>
    <a href="#">LINK 4</a>
    <a href="#">LINK 5</a>
</nav> 
Y su CSS:

Código CSS:
Ver original
  1. nav#main_nav {
  2.     width:1200px;
  3. }
  4. nav#main_nav a{
  5.     display:inline-block;
  6.     padding:15px 43px;
  7.     background-color:#2c2c2c;
  8. }

Lo que quiero, es esta botonera sea responsive; es decir, cuando la pantalla mida menos de 1200px (ancho total de nav#main_nav), los links se ajusten. Hice la famosa cuenta de Target/Contexto, y me queda así:

Código CSS:
Ver original
  1. @media screen and (max-width:1200px){
  2.     nav#main_nav{
  3.         width:inherit;
  4.     }
  5.     nav#main_nav a{
  6.         padding:15px 3.583333%; /* 43/1200 */
  7.     }
  8. }

No se si estoy haciendo mal la cuenta o qué, pero los elementos a (links) se van ajustando a medida que achico el navegador, pero el ultimo link (el quinto) se me va para abajo, no queda en línea con los otros cuatro. Evidentemente el valor que puse del padding right/left debe estar mal pero no se me ocurre qué otra cuenta puedo hacer para solucionarlo ya que el div padre #main_nav tiene un ancho total variable. ¿Alguien con alguna idea para orientarme? Gracias!! :)