tengo el siguiente ejemplo basico y sencillo de menu asi:
Código HTML:
Ver original<!DOCTYPE html>
div.container{
width: 1000px;
border:1px solid black;
padding-bottom: 100px;
margin: 0px auto;
}
div.menu{
width: 100%;
height: 80px;
margin-top: 30px;
}
ul.menu{
width: 100%;
padding: 0px;
}
ul.menu li{
float:left;
padding: 5px 0px;
list-style: none;
width: 142px;
background: red;
text-align: center;
}
ul.menu li:nth-of-type(7){
width: 148px;
}
ul.menu li:hover{
background:#FF4343;
}
ul.menu li a{
text-decoration: none;
color:white;
}
<li><a href="#">link1
</a></li> <li><a href="#">link2
</a></li> <li><a href="#">link3
</a></li> <li><a href="#">link4
</a></li> <li><a href="#">link5
</a></li> <li><a href="#">link6
</a></li> <li><a href="#">link7
</a></li>
como se observa en el ultimo li e tenido que darle un width diferente . esto para que me quede alineado al margen derecho del container. ya que si le quito un poquito de widht a los li en general me quedaria faltan un pequeño espacio para alinear el ultimo li y si le pongo otro poquito de ancho ps al intentar alinear se me sobresale y me pega un salto hacia la parte inferior ..
asi como tengo el ejemplo ps funiciona bien. no ha y ningun problema .. pero me preguntaba si esta forma es correcta o habria otra formas mas sencilla o mas correcta de