0

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

问题是我希望两个固定宽度的链接保持原样，但是浮动的右项目在其余可用空白中均匀分布。

看我的小提琴

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>

有人有想法么？

4

1 回答 1

4

试试这个 -演示

#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;
}​
于 2012-09-21T22:25:39.210 回答