javascript - 如何动态显示菜单，菜单项数量不定，总宽度一定

Question

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

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

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

<code><p class="header">
    <ul class="nav">
        <li class="nav_logo"><a href="/"><p>I A</p></a></li>
        <li style="width: 34.214285714285715px; margin-left: 34.214285714285715px; margin-right: 34.214285714285715px;"><a href="/home/clients" class="">Clients</a></li>
        <li style="width: 34.214285714285715px; margin-left: 34.214285714285715px; margin-right: 34.214285714285715px;"><a href="/home/creatives" class="">Creatives</a></li>
        <li style="width: 34.214285714285715px; margin-left: 34.214285714285715px; margin-right: 34.214285714285715px;"><a href="/home/whoWeAre" class="">Who<font style="font-family: sans-serif;">&nbsp;</font>we<font style="font-family: sans-serif;">&nbsp;</font>are</a></li>
        <li style="width: 34.214285714285715px; margin-left: 34.214285714285715px; margin-right: 34.214285714285715px;"><a href="/home/whatWeDo" class="">What<font style="font-family: sans-serif;">&nbsp;</font>we<font style="font-family: sans-serif;">&nbsp;</font>do</a></li>
        <li style="width: 34.214285714285715px; margin-left: 34.214285714285715px; margin-right: 34.214285714285715px;"><a href="/home/contact" class="">Contact</a></li>
        <li style="width: 34.214285714285715px; margin-left: 34.214285714285715px; margin-right: 34.214285714285715px;"><a href="/user/signUp" class="">Sign<font style="font-family: sans-serif;">&nbsp;</font>up</a></li>
        <li style="margin-left: 17.107142857142858px; margin-right: 17.607142857142865px;"><a href="/user/signIn" class="">Sign<font style="font-family: sans-serif;">&nbsp;</font>in</a></li>

    </ul>
    <p class="clear"></p>
</p>
</code>

<code class="lang-javascript">     $(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});
            }
        });
    }

</code>

Answer 1

css width 不是可以使用百分比？

Answer 2

百分比
flexbox