list - css - 动态宽度水平列表

Question

我正在尝试构建一个基于水平列表的菜单。在这个菜单中，两个左浮动的菜单链接是固定宽度的，而其余的菜单链接是右浮动的。

问题是我希望两个固定宽度的链接保持原样，但是 float 的右侧元素在其余可用空白处均匀分布。

查看我的 fiddle

CSS:

    #footer_menu {
        margin: 0;
        height: 54px;
        padding: 0px;
    }
    #footer_menu  ul {
        margin: 0;
        height: 54px;
        padding: 0px;
        display: table;
        table-layout: fixed;
        width:100%;
    }
    #footer_menu li {
        list-style: none;
        padding: 0px;
    }
    #footer_menu .nav_l {
        float: left;
        display: table-cell;
        white-space:nowrap;
    }
    #footer_menu .nav_r {
        float: right;
        width:auto;
        display: table-cell;
        white-space:nowrap;
    }

HTML:

    <div id="footer_menu">
        <ul>
            <li class="nav_l"><a href="#">Link</a></li>
            <li class="nav_l"><a href="#">Link</a></li>
            <li class="nav_r"><a href="#">Link</a></li>
            <li class="nav_r"><a href="#">Link</a></li>
            <li class="nav_r"><a href="#">Link</a></li>
            <li class="nav_r"><a href="#">Link</a></li>
        </ul>
    </div>

有人有什么想法吗？

Answer 1

试试这个 - DEMO

#footer_menu {
    margin: 0;
    height: 54px;
    padding: 0px;
    display: table;
    width: 100%;
}
#footer_menu  ul {
    margin: 0;
    height: 54px;
    padding: 0px;
    display: table-row;
    background: #ccc;
}
#footer_menu li {
    list-style: none;
    padding: 0px;
}
#footer_menu .nav_l {
    display: table-cell;
    white-space:nowrap;
    width:50px;
    padding:5px;
    border: 1px solid #000;
}
#footer_menu .nav_r {
    width:auto;
    display: table-cell;
    white-space:nowrap;
    padding:5px;
    border: 1px solid #c00;
}​