duda sobre maquetacion de menu

cristo995 · #1 (**permalink**) 22/06/2014, 12:20

tengo el siguiente ejemplo basico y sencillo de menu asi:

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    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;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="menu">
            <ul class="menu">
                <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>
            </ul>
        </div>
    </div>
</body>
</html>

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