html - このCSSメニューを100％に拡大する方法

Question

これが素晴らしいCSSメニューです：

唯一の欠点は、100％に拡張されないことです... 2つの要素がある場合は50％/ 50％であり、4つのアイテムの場合はテーブルセルと同じように25％/ 25％/ 25％/ 25％になります。どうやってするか？CSSは初めてです。

score 1 · Accepted Answer

display: table/table-cell(最新のブラウザーおよび IE8+ の場合) およびdisplay-table.htc (IE6/7 の場合) を使用します。

score -1 · Accepted Answer

100%メニュースパンが全幅になるように幅を変更します。

#myfantasticmenu { width: 100%; }

私はfirebugで変更をシミュレートし、必要なスタイルの定義は

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

そして、アイテムが4のときに2つと25のそれぞれに50/50が必要な部分については、そうするためにいくつかのjavascriptが必要になります。

jQueryの使用を検討すると、次のようになります。

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

スクリプトを回避することが主なターゲットである場合は、テーブルをゲームに取り込むと、必要な動作が自動的に実行されます。

2 に答える 2