Buenas,
He creado una lista horizontal con 5 opciones.
Las 4 primeras a la izquierda, con un ancho del 14% cada una de ellas, esto supone 576 píxeles.
La última tiene un ancho del 46%, 452 píxeles, (100-(14*4)) y me salta a la siguiente linia porqué tengo asignado un max-width de 1024píxeles.
Lo que no entiendo es porque sobrepasa los 1024 píxeles si tengo asignado el box-sizing.
Agradeceré si alguien puede decirme donde está el error. Gracias.
La imagen de como queda es ésta:
El código cssl es el siguiente:
Código CSS:
Ver original#menu {
box-sizing:border-box;
-moz-box-sizing:border-box;
float:left;
width:100%;
}
#menu nav
{font:bold 1.1em 'Arial';
padding-top:2px;
width:100%;
}
#menu nav ul {
list-style-type:none;
background:#367a7b;
}
#menu nav ul li#opcioActiva{
background:#035A5B;
}
#menu nav ul li {
float:left;
height:40px;
line-height:40px;
background:#5CACAD;
width:14%;
text-align:center;
margin-right:1px;
}
#menu nav ul li a{
text-decoration:none;
color:#FFF;
}
#menu nav ul li#bandera {
width:44%;
text-align:right;
margin-right:2px;
vertical-align:middle;
}