無序列表問題中的JQuery等間距導航鏈接

我正在寫一個JQuery腳本，它使用margin-right將包含<ul>的可變大小的水平導航鏈接均勻地分隔開來。該算法是：無序列表問題中的JQuery等間距導航鏈接

答：獲取寬度爲<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>

來源

2011-06-28 North Krimsly

你能告訴我們css的樣子嗎？ –

我只是假設一些css規則，但我相信這就是你要找的。 http://jsfiddle.net/TEDhb/

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

來源

2011-06-28 22:05:28

非常感謝Armin，非常聰明的使用：不是。 –

所有，它原來是一個CSS問題，而不是我的腳本問題。我使用display：inline-block顯示了我的列表項目，當我將其更改爲顯示時：block和float：left它工作。嗯。 –

是的。正如@ Boyetboy所提到的，它看起來像JS工作正常，只是一些CSS調整。上面的行只是一個建議:) –

你應該LIS數分裂，不LIS-1的數。

來源

2011-06-28 22:01:39

呃，沒有。 LI之間的間隔數量比LI的數量少一個 – jmbucknall

你是對的，我的不好。問題是LI的寬度不同，簡單的劃分不起作用，因爲一個LI（尤其是最後一個）可能會更寬。 –

討厭這樣說，但對我來說工作正常。它爲（我假設最小的CSS）Here is the jsFiddle。代碼的最上面部分是你的代碼（可以工作），底部註釋掉的部分是我的版本（只增加了效率）。

來源

2011-06-28 22:06:56 jmbucknall

謝謝Boyetboy。在上面的幫助和Armin的幫助下，我發現這是一個CSS問題，而不是我的腳本問題。 –

無序列表問題中的JQuery等間距導航鏈接

回答

相關問題