CSS - элементы списка горизонтальной навигации, чтобы заполнить все доступные spce

Использование CSS, как возможно иметь горизонтальный список и иметь все элементы списка для заполнения доступной ширины родительского пространства.

Я плаваю влево слева, а затем применяю некоторые дополнения к каждому, но я не могу получить полную заполненную ширину. Таким образом, оставляя зазор на правой стороне.

Я могу потенциально поплавать с последним элементом, но происходит то, что активное состояние элементов навигации будет поэтому выделять пробел, так как есть граница, применяемая к верхней части активного элемента списка. Это покажет пробел.

ОТВЕТЫ

Ответ 1

Рассматривайте его как таблицу:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <style>
        nav {width: 500px;}
        nav ul {
            list-style: none;
            margin:0;
            padding:0;
            display: table;
            background: red;
            width: 100%;
        }
        nav li {
            z-index:10;
            text-align: center;
            display: table-cell;
        }
        nav a {
            color: #fff;
            text-decoration: none;
            padding: 0 10px 0;
            height: 20px;
            line-height: 20px;
            display: block;
            text-align: center;
            background: blue;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Lorem</a></li>
            <li><a href="#">ipsum</a></li>
            <li><a href="#">dolor</a></li>
            <li><a href="#">sit</a></li>
            <li><a href="#">amet</a></li>
        </ul>
    </nav>
</body>
</html>

http://jsfiddle.net/SURzu/