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

#css

Вопрос:

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

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

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

Ответ №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/

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

2. @David, я отредактировал сообщение, чтобы дать вам полный пример. Удачи.

3. К сожалению, table-cell не работают с выпадающими меню, которые требуют, чтобы родительский LI был относительным.