Вопрос по html, css – Развернуть динамическое меню на всю ширину страницы

0

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

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

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

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

enter image description here

Вы всегда должны пытаться опубликовать некоторый код, чтобы мы могли видеть, что вы уже пробовали. sirmdawg
извиняюсь. смотрите обновление. Shir Gans
Спасибо :) Я ценю вашу помощь. Shir Gans
Все в порядке :) просто хочу попытаться помочь вам. sirmdawg

Ваш Ответ

2   ответа
4

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

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

display: table

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

display: table-cell

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

Вот и все :)

UL элемент должен иметь определенную ширину, например, 100%, при этом он должен быть установлен наdisplay:table
в IE7 вы должны оставить поплавок для & lt; li & gt; Shir Gans
0

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 работать, если элементы не помещаются в первую очередь - это в основном добавляет больше ширины.

Благодарю. Я на самом деле думаюthere is решение без необходимости задействовать jQuery / js. Это решение может заставить меню мерцать при загрузке страницы. Я еще не тестировал его, но постараюсь найти решение только с помощью CSS, если нет, то попробую. Shir Gans

Похожие вопросы