jquery根据字符串大小调整li大小

我有一些查询将计算每个li的像素宽度。 问题是它没有考虑A href中的字符数量。

您可能会获得“Cartouches /Réservoirs”，它将尝试根据其他项目的计算分配124px宽度。

我需要首先检查字符数是否适合指定的大小，如果它们不通过从具有足够空间的LI中删除一些来增加大小。

$('div#new-menu-lower ul li').css('width', ($('div#new-menu-lower ul').width() / $('div#new-menu-lower ul li').length)); $(function() { var menuWidth = $('div#new-menu-lower ul').width(); var listItems = $('div#new-menu-lower > ul > li').length; var itemWidth = Math.floor(menuWidth * (1/listItems)) - 20; $('div#new-menu-lower ul li').css('width', itemWidth); }); 

这是演示： http ： //jsfiddle.net/zwqYf/3/

正如您所看到的，当您hover时，物品会被破坏。

反正有没有绕过这个？

Answer 1

见http://jsfiddle.net/zwqYf/10/ ：

我们得到了li元素。

 var els=$('div#new-menu-lower ul li'); 

我们存储每个li的宽度（包括边框，填充和边距）。

 elsWidth=new Array(); for(var i=0;i 

我们总结它们

 var total=0; for(var i=0;i 

然后我们有一个960px的ul ，它必须包含至少total px。

然后，可用空间是$('div#new-menu-lower ul').width()-total 。

所以每个li可以有一个额外的宽度($('div#new-menu-lower ul').width()-total)/(els.length) 。

 var availWidthForEl=($('div#new-menu-lower ul').width()-total)/(els.length); 

我们将它舍入到2位小数

 availWidthForEl=Math.floor(availWidthForEl*100)/100; 

最后，我们为每个li分配其当前的（没有边框，填充和边距）加上它的额外宽度：

 for(var i=0;i 

Answer 2

我可以看到你正在尝试做什么，但有些方法更容易做你需要的，甚至不需要javascript / jquery。

考虑一下：

http://jsfiddle.net/zwqYf/4/

• 删除内联宽度样式。
• 改变位置：相对和顶部：3到行高
• 改变了李的填充“unbunching”

如果你需要让它们更加分开，可以改变li上的填充。

如果您需要更改按钮的高度，请不要忘记更改a的行高。

编辑：

http://jsfiddle.net/zwqYf/5/ – 更新，删除了一些冗余的CSS，在li之间做了更大的填充。