Равномерно расположенные навигационные ссылки, занимающие всю ширину ul в CSS3

Question

Я хотел бы создать горизонтальный навигационный список ссылок, где навигационные ссылки расположены равномерно и занимают всю ширину вмещающего контейнера <ul>. Навигационные ссылки могут быть разной ширины. Первая и последняя ссылки должны совпадать с началом и концом <ul> соответственно (то есть ссылки не центрированы), например:

|left side..right side|

link1 link1 link3 link4

Если я не ошибаюсь, я не думаю, что есть способ сделать это в CSS2. Но есть ли способ сделать это в CSS3? В противном случае мне нужно будет сделать это в Javascript.

Answer 1

Если вы настаиваете на CSS3, вы можете сделать это с помощью box-flex.Поскольку это не полностью реализовано во всех браузерах, свойства по-прежнему имеют префиксы -moz и -webkit.

Вот CSS, чтобы сделать это:

ul {
  display: box;
}

li {
  box-flex: 1;
}

Но так каквсе браузеры используют его, вы должны добавить -moz-box-flex, -webkit-box-flex и т. д.

Вот демонстрационная версия: http://jsfiddle.net/tBu4a/9/

Answer 2

Это просто сделать с CSS2:

ul {
    display: table;
    width: 100%;
}
li {
    display: table-cell;
}
a {
    display: block;
}

Вот рабочий пример . Проблема не столько в том, что у CSS2 нет способа это сделать, а в том, что IE не полностью поддерживал CSS2 до версии 8.

- редактирование

Хорошо, теперь я думаю, что понимаю ваши требования:

ul {
    display: table;
    width: 100%;
    border: 0;
    padding: 0;
    background-color: blue;
}
li {
    display: table-cell;
    border: 0;
    padding: 0;
    text-align: center;
}
li:first-child {
    text-align: left;
}
li:last-child {
    text-align: right;
}
a {
    display: block;
    padding: 0.25em 0;
    background-color: white;
    text-decoration: none;
}

Вот оно в действии . Я обнулел все границы и отступы согласно вашим комментариям, вы можете добавить некоторые обратно, но вам, конечно, нужно обнулить левую границу / отступ первой ссылки и правую границу / отступ правой ссылка, использующая либо li:first-child, либо li:first-child a (и противоположные last-child единицы).