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

Question

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

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

Подменю и выпадающие списки будут добавлены позже.

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

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

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

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

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

Answer 1

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

Дисплей: Table-Man

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

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

Answer 2

Вот мое решение 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');
    }
});

Answer 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%');

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

Answer 4

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

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

Answer 5

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