Question

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

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

的 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;
}

css - 动态宽度水平列表

1 个答案: