0

水平リストベースのメニューを作成しようとしています。このメニューでは、左側の2つのフロートメニューリンクは固定幅で、残りのメニューリンクは右側にフロートされています。

問題は、2つの固定幅のリンクをそのままにしておきたいのですが、フロートされた右側のアイテムが、使用可能な残りの空白全体に均等に配置されるようにすることです。

私のフィドルを参照してください

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 に答える