如何拉長這個CSS菜單到100％

-1

唯一的缺點它不是拉伸到100％...如果它有2個元素，應該是50％/ 50％，如果4然後是25％/ 25％/ 25％/ 25％，就像它們是表格單元一樣。怎麼做？我是新來的CSS。

2012-04-29 John Smith

如果您真的想要，您可以使用display：table ;, display：table-row ;, display：table-cell ;,等等來模擬表格單元格樣式寬度。 – reisio

-1

將其寬度修改爲100%將使菜單跨度變爲全寬。

#myfantasticmenu { width: 100%; }

我模擬了螢火蟲的變化和需要的樣式認定中是

#nav { 
    overflow: hidden; /* To clear the div */ 
    width: 100%; 
}

而關於部分，你需要50/50兩個和25時，每個項目有4個，你會需要一些JavaScript來這樣做。

如果你考慮使用jQuery則它會像

childs= $("#myfantasticmenu").children('a'); //grab the list items 
childs.css('width', (100/childs.length)+%);

如果避免腳本是你主要目標，然後把表進入遊戲，他們自動你需要的行爲。

來源

2012-04-29 22:42:11 Starx

很希望我能避免這個:) –

你建議使用JavaScript（和jQuery）和不正確的HTML來做一些CSS可以做的事情。 – reisio

使用表格進行簡單的導航並且在普通CSS可以做到的時候建議使用JavaScript並不是很好，並且在JavaScript可以做到的時候建議使用jQuery也不是很好。根據http://stackoverflow.com/privileges/vote-down，我發現你的問題最沒有用，並且性能下降 - 這沒什麼個性。 – reisio

使用display: table/table-cell（用於現代瀏覽器和IE8 +）和display-table.htc（用於IE6/7）。

來源

2012-04-29 23:12:05

子菜單呢？ – chifliiiii

@chifliiiii子菜單究竟是什麼？ –

沒關係，我找到了解決方案。當你在表格單元格中定位一個子菜單時，它將不起作用。所以解決方案很簡單，將li內容封裝在div中 – chifliiiii

如何拉長這個CSS菜單到100％

回答

相關問題