Навигационное меню, которое охватывает всю ширину контейнера с постоянным горизонтальным заполнением

Question

Я создал навигационное меню, как на скриншоте ниже. Он охватывает всю ширину контейнера, а левый / правый отступ каждого пункта меню постоянен. Это было легко сделать путем жесткого кодирования левого / правого отступа в CSS, но я хочу, чтобы отступы могли меняться, когда администратор сайта редактирует меню.

Есть ли способ сделать это с помощью чистого CSS (CSS3 нормально)?

Это было достаточно просто сделать с помощью jQuery (я подсчитал ширину пунктов меню и рассчитал необходимые отступы). Но я столкнулся с некоторыми проблемами в некоторых браузерах из-за использования веб-шрифтов Google. В Chrome и Firefox 4 в Windows (не в Mac) веб-шрифт не загружался во время выполнения моего скрипта, что приводило к неправильным измерениям ширины. Я пытался запустить скрипт в событии готовности DQ jQuery и в активном событии Google Font API . Событие active работало в Chrome, но в Firefox 4 его часто вызывали до применения шрифта.

Заранее спасибо.

Answer 1

Используйте событие jQuery .load в соответствии с рекомендациями пользователя тридцать дней.

Answer 2

Вот jsfiddle другого потенциального решения .

Используя этот макет и предполагая, что количество пунктов меню будет изменяться, вы вызываете метод пересчета после добавления / удаления элемента списка. В этом примере я использовал YUI3 для манипулирования DOM, но вы можете сделать это несколькими способами. Примечание. Я не тестировал функцию javascript, ее «возможно, рабочий псевдокод».

(Возможно, вам придется вычесть еще примерно 2% из ширины элементов списка, если вы пытаетесь работать с IE6 / 7)