Меню с выравненными li

[npofopr]

Помогите сделать вот такое меню

Суть такая, чтобы li автоматом подстраивались под ширину.

Сперва я подумал, что мне подойдет вот такое решение: xiper, которое и на этом форуме обсуждалось много раз.

Но загвоздка в том, что между li есть бордеры, а в том варианте li не стоят в притык, между ними есть отступы.

Вот тут я и остановился. Сделал обычный float: left; width: N%;

Вот думаю, может есть какие то решения.

Или тут только js?

[margarita]

а за счет чего вы хотите расширять/сужать li за счет падднгов или растояний между li?

[npofopr]

За счет паддингов у ссылок

[margarita]

надеюсь я правильно поняла что надо

http://jsfiddle.net/cmsKT/2/

[pashkje]

решил сделать свой вариант :)http://jsfiddle.net/mW32S/

[npofopr]

надеюсь я правильно поняла что надо

http://jsfiddle.net/cmsKT/2/

ul должен быть на всю ширину. width:100%;

Ну и это же меню. <a> должно быть. Конечно можно менять бэграунд у li при ховере на <a>, но логичнее же бэграундить <a>.

Можно и на li ховерить) Правда в IE вроде были с этим проблемы только заканчивались ли они на IE6

решил сделать свой вариант :)http://jsfiddle.net/mW32S/

Тоже самое.

ul не на 100%, т.е. последний li не у правого края.

Edited October 26, 2012 by npofopr

[npofopr]

Пока что я думаю над таблицей. Она тут очень бы подошла вроде)

[pashkje]

А так? http://jsfiddle.net/wz2cK/

[margarita]

ну добавила width: 100% - по сути ж ничего не поменялось, т.к. ul и так растянивапнется от ширины li , а они занимают 100% ширины блока

или я не правильно понимаю?

[npofopr]

ну добавила width: 100% - по сути ж ничего не поменялось, т.к. ul и так растянивапнется от ширины li , а они занимают 100% ширины блока

или я не правильно понимаю?

Добавьте для ul бэграунд с width:100%, у li у вас вроде бы есть. Вы должны увидеть, что li работает никак td у таблицы, например.

Если я вас правильно понял)

А так? http://jsfiddle.net/wz2cK/

А что поменялось? :-) Добавьте беграунд для ul

[margarita]

ок, поняла

а так http://jsfiddle.net/e3aqv/2/ ?

Edited October 26, 2012 by margarita

[npofopr]

ок, поняла

а так http://jsfiddle.net/e3aqv/2/ ?

:-) Ну так то понятно. Так да. Просто хотелось с <li> это сделать.

Можно конечно сделать для <li> {table-cell} но не везде сработает.

[Great Rash]

перестаньте кривляться и юзайте таблицу. Я ж правильно понимаю, что количество <li> вам заранее не известно?

Если вам прям не вмоготу использовать блоки вместо таблиц, то юзайте display: table/display: table-cell и специальный скрипт для ИЕ7.

[npofopr]

Ну как то без кривлений)

Без кривлений не интересно совсем

В общем ответы найдены) Всем хороших выходных