автоматически рассчитывать ширину пунктов меню с помощью CSS

Question

У меня есть меню, созданное с помощью ul li's.Я хочу автоматически позиционировать пункты меню с помощью css, чтобы после изменения текста пункта меню позиция была пересчитана.В примере позиционирование скрипки выполняется с отступом, и в этом случае, если текст становится длиннее, он переходит на следующую строку.

пример скрипта:

http://jsfiddle.net/amkrtchyan/9WbaC/

Answer 1

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

Вы можете сделать это с помощью tableвведите display display properties:

nav {display:table;}
nav ul {display:table-row;}
nav ul li {display:table-cell;}

В дополнение к этому я удалил float из вашего списка элементов:

• Вот как это выглядит с большим количеством элементов: http://jsfiddle.net/9WbaC/2/

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

• Вот как это выглядит только с несколькими элементами: http://jsfiddle.net/9WbaC/3/

Другое решение заключается в жестком кодировании ширины, встроенной на стороне сервера, в процентах (или px, если вы знаете общую ширину в пикселях), в зависимости от количества элементов верхнего уровня..