使最後一個內聯列表項擴展容器的剩餘寬度

我正在尋找一種方法來使最後的內聯列表項擴展其容器的其餘部分。所以我有這樣的事情。使最後一個內聯列表項擴展容器的剩餘寬度

<nav> 
    <ul> 
    <li></li> //width = 50px 
    <li></li> //width = 50px 
    <li class="last"></li> //width needs to fill the remaining 300px 
    </ul> 
</nav> 

nav { 
    width:400px; 
    height:50px; 
} 
nav > ul > li { 
    display:inline-block; 
    padding:5px; 
}

現在列表項的數量不同，所以我不能將最後一個列表項設置爲設置寬度。我需要使它填充導航寬度中剩下的任何內容。如何只使用CSS？

來源

2013-02-06 Pollux Khafra

將nav的總是400px寬？或者它會使用百分比？ –

始終設置寬度。 –

您可以使用display: table（和table-cell和，至少爲Firefox，table-row）與table-layout: fixed得到其中由筆者表示寬度表算法（你）是由瀏覽器應用，而不是其他方式在瀏覽器中做它最適合單元格寬度適應其內容。
然後將50px的寬度應用於除最後一個之外的所有「單元格」。
我對ul和table使用table-row其nav家長因爲對外匯18設置在uldisplay: table沒有預期的效果（與具有又名中充當排陰影元素創建缺少的部分瀏覽器的東西-之間）。非常具有描述性（這個元素必須被渲染爲一個表格，這個作爲一個行，這些元素作爲單元格）會有所幫助。

小提琴這裏：http://jsfiddle.net/X6UX9/1/

HTML：

<nav> 
    <ul> 
    <li> //width = 50px</li> 
    <li>//width = 50px</li> 
    <li class="last">//width (...) 300px</li> 
    </ul> 
</nav>

CSS：

* { 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 
nav { 
    display: table; 
    table-layout: fixed; 
    width:400px; 
    height:50px; 
} 
nav > ul { 
     display: table-row; 
} 
nav li { 
    display: table-cell; 
    padding:5px; 
    outline: 1px dashed blue; 
} 
nav li:not(:last-child) { 
    width: 50px; 
}

PS：使用:last-child設置寬度與IE9 +，而不是IE8 +我兼容在小提琴中說...

編輯：oops我沒有看到你的.last類最後li。那麼，你有這個想法:)
edit2：更新提琴使用這個類，既不:not()也:last-child僞

來源

2013-02-06 20:32:32 FelipeAls

：不是IE9 +。 – Michael

幸運的是，我可以使用一個特定的選擇器來選擇不是第一個和最後一個選項，所以我可以這樣做。這是一個我不知道的好方法。 –

@邁克爾真的，謝謝。我相應地更新了答案，現在它使用'.last'和'width：auto'在最後一個「單元格」上「撤消」寬度：50px。 – FelipeAls

使最後一個內聯列表項擴展容器的剩餘寬度

回答

相關問題