Question

我有一些查询会计算每个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/

正如您可以看到，当您悬停时，物品已损坏。

无论如何都要绕过这个？

Answer 1

我可以看到你想要做的事情，但是有一些方法可以更轻松地完成你所需要的工作，甚至不需要javascript / jquery。

考虑一下：

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

删除了内联宽度样式。
更改位置：relative和top：3到line-height
将li的填充改为“unbunching”

如果您需要将它们分开，请更改li上的填充。

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

修改

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

Answer 2

请参阅http://jsfiddle.net/zwqYf/10/：

我们获得了li个元素。

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

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

elsWidth=new Array();
for(var i=0;i<els.length;i++){
 elsWidth[i]=$(els[i]).outerWidth(true);  
}

我们将它们归入total

var total=0;
for(var i=0;i<elsWidth.length;i++){
 total+=elsWidth[i];  
}

然后我们的ul 960px必须至少包含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<els.length;i++){
 $(els[i]).css('width', $(els[i]).width()+availWidthForEl);
}

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

2 个答案: