javascript - 如何动态显示菜单，菜单项数量不定，总宽度一定-PHP中文网问答

如图，菜单项的个数数量不一定。

但是整个菜单的总宽度是一定的

如何让菜单项充满整个菜单，没有右边的白色空隙，目前是用的jQuery动态计算，但是不完美。


    

        I A
        Clients
        Creatives
        Who we are
        What we do
        Contact
        Sign up
        Sign in

     $(function() {
        set_width();
        //setTimeout('set_width()', 50);
    });
    function set_width()
    {
        // 实际菜单的总长度
        //  in 394  600
        var menuwidth = 0.00;
        $('ul.nav li:gt(0)').each(function() {
            menuwidth += $(this).width();
        });
        //实际菜单的总长度  893
        var total_width = $(".header").width();
        // 减去 logo的宽度
        var rest = total_width - menuwidth - $('ul.nav li:eq(0)').width();
        var menu_number = $("ul.nav li:gt(0)").length;

        var margin = rest / ((menu_number) * 2);//to do.
        G('total_width: '+total_width + ';menuwidth: ' + menuwidth +';rest: ' +rest+';margin: '+margin);
        var lastmargin = rest - margin*2*(menu_number-1) - margin+1;
        var a = 0;
        $('ul.nav li:gt(0)').each(function() {
            a++;
            if(a === menu_number){
                $(this).css({"margin-left": margin/2, "margin-right": lastmargin/2});
            }else{
                //$(this).css({"margin-left": margin/2, "margin-right": margin/2});
                $(this).css({"width": margin,"margin-left": margin, "margin-right": margin});
            }
        });
    }