CSS:使用ul固定水平菜单,可变宽度选项卡

Question

我有一个水平菜单.标记看起来像这样:

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

Submenus和suckerfish下拉列表将在稍后出现.

的UL需要跨越页面的宽度(例如,100%或1000像素).

该LIS应在宽度根据其内容有所不同.

所以结果看起来像这样:

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

现在通过修复每个li标签的宽度很容易做到这一点,但由于菜单是CMS驱动的,我需要允许标签的宽度自动变化.使用表格这将是微不足道的,但我想不出用ul做的方法.

Answer 1

这是一个案例

显示:表曼

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');
    }
});