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>
Código CSS:
Ver original
nav#main_nav { width:1200px; } nav#main_nav a{ display:inline-block; padding:15px 43px; background-color:#2c2c2c; }
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
@media screen and (max-width:1200px){ nav#main_nav{ width:inherit; } nav#main_nav a{ padding:15px 3.583333%; /* 43/1200 */ } }
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!! :)