全宽度水平导航栏，均匀分布的项目 [英] Full width horizontal nav bar with evenly spaced items

问题描述

起点：

终点：

我试图有一个水平导航栏填充它的100％的容器。在第一个示例中，您将看到左侧对齐的所有项目。我想让它填充容器的整个宽度，如第二个例子所示。我想要所有的项目之间的间距是统一的（不同于它的显示方式，我只是把这一起快速给你一个想法我想要做的）。

I'm trying to have a horizontal navigation bar that fills 100% of it's container. In the first example, you'll see all of the items aligned to the left. I'm trying to get it to fill the full width of the container as shown in the second example. I want the spacing between all of the items to be uniform (unlike the way it's shown, I just put that together quickly to give you an idea of what I'm trying to do). I need the text to not be an image and the container it goes in is fluid not fixed.

推荐答案

使用静态数字元素很容易 - http://jsfiddle.net/X56cJ/

With a static number of elements it's easy - http://jsfiddle.net/X56cJ/

但是，如果你想在文本之间有均匀的间距，而不是元素本身，它变得棘手。同样，如果元素的数量不改变，你使用css类和静态宽度。否则它必须是javascript

However, if you want to have uniform spacing between the text, not the elements themselves - it becomes tricky. Again, if the number of elements doesn't change, you do it with css classes and static widths. Otherwise it'll have to be javascript

EDIT ：这是JavaScript在元素之间获得相同空格的方式。

EDIT: Here's the JavaScript way of getting same space between elements.

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');
    });
}

完整示例此处

这篇关于全宽度水平导航栏，均匀分布的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！