JQuery等間隔のナビゲーションリンクの順序付けられていないリスト内での問題

Question

margin-rightを使用して、<ul>を含む可変サイズの水平ナビゲーションリンクを均等に配置するJQueryスクリプトを作成しています。アルゴリズムは

A：<ul>コンテナの幅を取得します。

B：容器の内側にあるすべての<li>アイテムの幅を追加します。

C：AからBを減算し、容器内<li>アイテムの数で割ることによって最後<li>除く各項目の右マージンを計算し、マイナス1

しかし、欠陥のいずれかが私のアルゴリズムであり、または私のコードでは、リンクがコンテナをオーバーフローしているためです。ここに私のコードです。あなたは助けてもらえますか？

おかげで、 -Northk

var containerWidth = $('#main-nav ul').width(); 
    var linksWidth = 0; 
    $('#main-nav ul').children().each(function() { 
     linksWidth += $(this).width(); 
    }); 
    var linkSpacing = Math.floor((containerWidth - linksWidth)/($('#main-nav ul').children().length - 1)); 
    $('#main-nav ul').children().css('margin-right', linkSpacing + "px"); 
    $('#main-nav ul').children().filter(":last").css('margin-right', 0); 

そしてHTMLは次のようになります。

<nav id="main-nav"> 
<ul> 
<li> 
<a href="#">home</a> 
</li> 
<li> 
<a href="#">link-number-2</a> 
</li> 
</ul> 
</nav> 

Answer 1

私はちょうどいくつかのCSSルールを想定しましたが、これはあなたが探していたものだと思います。 http://jsfiddle.net/TEDhb/

$('#main-nav ul li:not(:last-child)').css('margin-right', linkSpacing + "px"); 

Answer 2

あなたがれるLIの数だけ、ではないのLI-1の数で割る必要があります。

Answer 3

はこれを言って嫌い、それは私のために正常に動作します。それのためにHere is the jsFiddle（私は最小限のCSSを想定していました）。コードの上部はあなたのコード（動作します）、コメントアウトされた部分の下は私のバージョンです（これは何も追加しませんが、より効率的です）。