0

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

正如您在悬停时看到的那样，项目已损坏。

有没有办法解决这个问题？

4

2 回答 2

2

我可以看到您正在尝试做什么，但是有一些方法可以更容易地完成您需要的操作，甚至不需要 javascript/jquery。

考虑一下：

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

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

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

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

编辑：

http://jsfiddle.net/zwqYf/5/ - 更新，删除了一些多余的 css，使 li 之间的填充更大。

于 2012-08-13T15:59:21.940 回答
1

见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必须至少包含totalpx。

那么，可用空间为$('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);

我们将其四舍五入到小数点后两位

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

最后，我们将li其当前的（不带边框、填充和边距）加上其额外宽度分配给每个：

for(var i=0;i<els.length;i++){
 $(els[i]).css('width', $(els[i]).width()+availWidthForEl);
}
于 2012-08-13T16:48:24.077 回答