Question

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

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

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

ul 需要跨越页面的宽度（例如100％或1000px）。

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

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尽可能地延伸到它内容载有它

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

5 个答案: