CSS: Исправлено горизонтальное меню с вкладками переменной ширины, используя ul

У меня есть горизонтальное меню. Разметка выглядит следующим образом:

<ul class="menu">
   <li>Item 1</li>
   <li>Longer Item 2</li>
   <li>Item 3</li>
</ul>

Подменю и выпадающие списки suckerfish появятся позже.

Уль должен охватывать ширину страницы (например, 100% или 1000 пикселей).

Значение lis должно варьироваться в зависимости от их содержимого.

Таким образом, результат будет выглядеть следующим образом:

-----------------100% of page------------
|--Item 1--|--Longer item 2--|--Item 3--|

Теперь это легко сделать, установив ширину для каждого тега li, но поскольку меню будет управляться CMS, мне нужно, чтобы ширина вкладок менялась автоматически. С таблицей это было бы тривиально, но я не могу придумать способ сделать это с помощью ul.

Ответы

Ответ 1

Здесь мое решение jquery:

var actualWidth = 1000;
var totalLIWidth = 0;

// Calculate total width of list items
var lis = $('ul li');

lis.each(function(){
    totalLIWidth += $(this).width();
});

// Work out how much padding we need
var requiredPadding = Math.round(((actualWidth-totalLIWidth)/lis.length)/2);

// To account for rounding errors, the error is going to be forced into the first tab.
var roundingErrorFix = (requiredPadding*lis.length*2)+totalLIWidth-actualWidth;

// Apply padding to list items
lis.each(function(i) {
    if(i==0) {
        $(this).css('padding-left',requiredPadding-roundingErrorFix+'px')
            .css('padding-right',requiredPadding-roundingErrorFix+'px');
    }
    else {
        $(this).css('padding-left',requiredPadding+'px')
            .css('padding-right',requiredPadding+'px');
    }
});

Ответ 2

Это случай для

Дисплей: Table-Man

ul {
  display: table;
  width: 100%;
  table-layout: fixed;
}
li {
  display: table-cell;
}

К сожалению, вы должны отказаться от идеи поддержки IEs 6 и 7, но иначе это путь (или переход на HTML-таблицы, которые могут быть или не быть настолько далеки от семантического содержимого разметки).

Ответ 3

Если вы довольны использованием JavaScript, jQuery может решить проблему следующим образом

var $menu, totalwidth;

$menu = $('ul.menu');
totalwidth = ($menu.width()/100);

$('ul.menu li').each(function(){
    this.css('width',String(Math.floor(this.width()/totalwidth))+'%');
});

$menu.css('width','100%');

Это непроверено, но выглядит правильно для меня. Прокомментируйте, если у вас есть какие-либо вопросы.

Ответ 4

Я считаю, что предложение boldewyn должно работать. Я бы использовал этот подход для современных браузеров, а затем использовал условные комментарии для подачи следующего на ie6/7, чтобы навигатор выглядел нормально, хотя он не будет охватывать 100% ширину.

ul {
  width: 100%;
}
li {
  float:left; // or display:inline-block;
}

Ответ 5

Если вы пытаетесь создать стиль ul (так, чтобы он растягивался по всей странице), лучше всего заключить его в div и создать стиль div, а затем разрешить ul просто растягиваться до контент несет его