css - 動態寬度水平列表

Question

我試圖建立一個基於水平列表的菜單。在此菜單中，左側兩個浮動菜單鏈接的寬度是固定的，而其餘菜單鏈接是右側浮動的。

問題是我希望兩個固定寬度的鏈接保持原樣，但是浮動的右邊的項目要均勻分佈在其餘可用空白處。

見我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; 
}​