用css自動計算菜單項寬度

Question

我有一個用ul li創建的菜單。我想用css自動定位菜單項，這樣在更改菜單項文本後，位置將被重新計算。在這個例子中，小提琴定位是用填充完成的，在這種情況下，如果文本變得更長，它將進入下一行。

例如小提琴：

http://jsfiddle.net/amkrtchyan/9WbaC/

Answer 1

這是一個問題，我總是有，因爲我們網站的導航總是由客戶端生成，我們不知道有多少項目會出現。

可以排序與table型顯示屬性做到這一點：

nav {display:table;} 
nav ul {display:table-row;} 
nav ul li {display:table-cell;} 

除了這個，我刪除從列表項float：

• 這裏是什麼樣子，有很多的項目：http://jsfiddle.net/9WbaC/2/

我用空白的文本，所以你可以看到ef這會對包裝產生影響。

• 這裏是什麼樣子，只有少數項目：http://jsfiddle.net/9WbaC/3/

另一種解決方案是硬編碼的寬度內嵌在服務器端用百分比（或px，如果你知道在總寬度像素），基於有多少頂級項目。