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