Равномерно расположенные навигационные ссылки, занимающие всю ширину 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 из них).