18 мая 2012 г., 07:29 отShir Gans

Развернуть динамическое меню на всю ширину страницы

Я получил динамическое горизонтальное меню. Я пытаюсь сделать это всегда 100% ширины страницы. Поэтому, если имеется 6 или 8 элементов или если я хочу изменить заголовок каждого элемента, мне больше не нужно изменять размер каждого элемента.

Меню как<ul> <li>Item 1</li> <li>Item 2</li> ... </ul> список. Пожалуйста, посмотрите, как я хотел бы, чтобы это было представлено (прикрепленное изображение). Прямо сейчас в моем html элементы заканчиваются до полной ширины.

Есть идеи как решить это? Я думаю, что если бы я превратил меню в таблицу, это бы исправило это, но я предпочитаю не работать с таблицами в этом случае.

Вы можете увидеть сайт здесь:введите описание ссылки здесь Благодарю.

enter image description here

Ответы на вопрос(0)

18 мая 2012 г., 08:06 отsirmdawg

Query, вы можете использовать следующий код ...

Посмотрите этот jsfiddle как пример:

http://jsfiddle.net/BDVTP/

Вам нужно будет включить jquery, если вы этого еще не сделали (но похоже, что вы это сделали)

Затем используйте следующий код:

 <script type="javascript/text">
 $(document).ready(function(){
     var width = $('#access').width(); // width of the menu container
     var total = $('#menu-top-menu li').size(); //number of menu items
     $('#menu-top-menu').find('li').each(function(i){
         var border = parseInt($(this).css('border-left')); //border you have set
         $(this).width((width/total)-border); // calculate width and set it
     });​
 });
 </script>

Надеюсь, это поможет вам :)

Обратите внимание, что это будетNOT работать, если элементы не помещаются в первую очередь - это в основном добавляет больше ширины.

13 июл. 2012 г., 10:07 отShir Gans

наконец я нашел решение для этого. Только CSS, JS не требуется. Это довольно просто:

Упаковка<ul> должен иметь:

display: table

<li> Сам должен иметь:

display: table-cell

и удалите его.

Вот и все :)

ВАШ ОТВЕТ НА ВОПРОС