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

我有一个水平菜单。标记看起来像这样：CSS：固定水平菜单，可变宽度选项卡，使用ul

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

子菜单和suckerfish下拉菜单将在稍后。

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

lis根据其内容应该有所不同。

所以结果是这样的：

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

现在很容易通过固定每个L1标签宽度要做到这一点，但因为菜单将CMS驱动我需要允许的宽度选项卡会自动变化。与表这将是微不足道的，但我想不出一种方式来做到这一点与ul。

来源

2009-12-07 cbp

这里是我的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'); 
    } 
});

来源

2009-12-07 12:59:35 cbp

好的解决方案，但它只适用于在将“roundingErrorFix”除以2之前将其应用于第一个项目之前。 – 2011-08-16 21:50:37

伟大的答案 - 要注意的一件事是，列表项的宽度不包括边界，所以添加边界到第10行totalLIWidth（在lis.each循环之后）。 – 2011-12-14 13:23:50

-1

如果您尝试对ul进行样式设置（例如，它横跨整个页面），最好的方法是将其封装在div中，并设置div的样式，然后让ul只能拉伸其内容拿它

来源

2009-12-07 10:51:51 LorenVS

这是

显示的情况：表曼

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

不幸的是，你应该放弃支持IE的6和7的想法，但没有别的，这是要走的路（或开对HTML表格，这可能会或可能不会远离标记的语义内容）。

来源

2009-12-07 10:52:08 Boldewyn

+1爆笑.... – 2009-12-07 11:01:51

感谢 - 当然，我需要至少IE 7支持:) – cbp 2009-12-07 11:45:27

Boldewyn的回答没有任何的工作！我的测试 - 结果的列表项目都是相同的宽度。 – rda3000 2011-04-18 17:33:58

如果您使用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%');

这是未经测试，但权在我看来。评论你是否有任何问题。

来源

2009-12-07 10:57:30 Gausie

明确的字符串转换是不必要的，但除此之外，你击败了我; – 2009-12-07 10:59:55

这可能最终会变得比这更复杂：$ menu.width（）将是100％（尽管您获得的实际值将以像素为单位），除非你浮动UL，因为UL是一个块元素。所以你将不得不漂浮UL，以获得正确的总宽度值。或者你可以通过首先总结LI元素的宽度然后再次通过它们来调整到新的宽度来获得总宽度。 – wheresrhys 2009-12-07 11:13:12

这是我的第一个想法，但我不想做两个循环... 浮动和展开听起来像一个安全的赌注，但是，我应该编辑我的代码？ – Gausie 2009-12-07 11:16:25

我认为boldewyn的建议应该起作用。我将这种方法用于现代浏览器，然后使用条件注释将以下内容提供给ie6/7，以便导航在那里看起来不错，但不会跨越100％的宽度。

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

来源

2009-12-07 11:03:45 wheresrhys

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

回答

相关问题