全寬度的水平導航欄有均勻分佈的項目

starting point http://img12.imageshack.us/img12/3100/example1a.gif

終點：

end point http://img846.imageshack.us/img846/799/example2w.gif

我想有一個充滿100％的水平導航欄它的容器。在第一個示例中，您會看到所有項目均與左側對齊。我試圖讓它填充容器的整個寬度，如第二個示例中所示。我希望所有項目之間的間隔是統一的（不像它顯示的方式，我只是把它們放在一起，以便讓你知道我在做什麼）。我需要的文字不是圖像，它所進入的容器是流體不固定的。

來源

2011-10-04 Tom

您通常需要知道你有多少項目在你的菜單來完成這件事。如果你有5個項目，你把每個項目設置爲20％的寬度等等。 –

隨着元素的靜態數量很容易 - http://jsfiddle.net/X56cJ/

但是，如果你想有沒有元素本身的文本之間均勻間隔， - 它變得非常棘手。同樣，如果元素的數量沒有改變，你可以使用CSS類和靜態寬度。否則它必須是javascript

編輯：以下是在元素之間獲得相同空間的JavaScript方法。

HTML：

<ul class="menu"> 
    <li>About Us</li> 
    <li>Our Products</li> 
    <li>FAQs</li> 
    <li>Contact</li> 
    <li>Login</li> 
</ul>

JS：

function alignMenuItems(){ 
    var totEltWidth = 0; 
    var menuWidth = $('ul.menu')[0].offsetWidth; 
    var availableWidth = 0; 
    var space = 0; 

    var elts = $('.menu li'); 
    elts.each(function(inx, elt) { 
     // reset paddding to 0 to get correct offsetwidth 
     $(elt).css('padding-left', '0px'); 
     $(elt).css('padding-right', '0px'); 

     totEltWidth += elt.offsetWidth; 
    }); 

    availableWidth = menuWidth - totEltWidth; 

    space = availableWidth/(elts.length); 

    elts.each(function(inx, elt) { 
     $(elt).css('padding-left', (space/2) + 'px'); 
     $(elt).css('padding-right', (space/2) + 'px'); 
    }); 
}

完整的示例here

來源

2011-10-04 18:49:46

是的，我會有一個靜態數量的元素，這就是我拍攝的文本之間的統一間距。有關去Javascript路線的任何建議？ – Tom

如果您有一個靜態數量的元素，則可以使用純CSS來指定每個元素的寬度。獲取寬度需要一點時間，但是可行。雖然你可以使用JS來做這件事，但CSS會更簡單一些。 –