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];  
}

次に、少なくともpxが含まれている必要ulがあります。960pxtotal

次に、使用可能なスペースは$('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);
}
于 2012-08-13T16:48:24.077 に答える