CSS: Зафиксированный с горизонтальным меню, с вкладками переменной ширины, с помощью ул.
5 ответов
Вот мое решение 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');
}
});
Это случай для
Display: Table-Man
ul {
display: table;
width: 100%;
table-layout: fixed;
}
li {
display: table-cell;
}
К сожалению, вам следует отказаться от мысли о поддержке IE 6 и 7, но в противном случае это выход (или переключение на таблицы HTML, которые могут или не могут быть так далеко от семантического содержания разметки).
Если вы довольны использованием 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%');
Это не проверено, но мне кажется правильным. Прокомментируйте, если у вас возникнут какие-либо вопросы.
Я считаю, что Болдевин Предложение должно работать. Я бы использовал этот подход для современных браузеров, а затем использовал бы условные комментарии, чтобы передать следующее в ie6 / 7, чтобы навигация выглядела нормально, хотя и не охватывала 100% ширину.
ul {
width: 100%;
}
li {
float:left; // or display:inline-block;
}
Если вы пытаетесь стилизовать ul (так, чтобы он растягивался на всю страницу), лучше всего заключить его в div и стилизовать div, а затем разрешить ul растягиваться настолько, насколько это позволяет его содержимое