3

私はjavascriptを使用してこれを達成できることを知っていますが、DOMのロードとこれを非表示にするには、スタイルが適用されるか、ページの変更ごとに読み込みgifを使用する必要があります。

基本的に、ナビゲーションの幅は固定されており、たとえば960です。サイトはCMS駆動型であるため、クライアントは2つのメニュー項目または10のメニュー項目を持つことができます。メニュー項目は、その中に含まれるテキストの長さに応じたサイズにする必要があり、各メニュー項目には、次のように均一なパディングを付ける必要があります。

ここに画像の説明を入力してください

ここに画像の説明を入力してください

理想的には、テーブルの使用を避けたいと思います。私が達成しようとしていることは不可能だと確信していますが

4

1 に答える 1

2

必要なものは、Flex-Box（フレキシブルボックス）モデルと呼ばれます。すべてのブラウザに実装されているわけではありません。テストの目的で、ええ、次のCSSを進めることができます。

CSS

ul li {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    display: -moz-box;
    -moz-box-orient: horizontal;
    display: box;
    box-orient: horizontal;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}

フレキシブルボックスモデルのクイックヒットで、基本的な例と高度な例を見ることができます。

Flexboxモデルのレイアウト

通常のボックス
http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/flexbox/quick/475x297xflex01.gif.pagespeed.ic.I78_V3_QCI。
最後の1つのwebpFlexboxhttp: //1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/flexbox/quick/475x297xflex02.gif.pagespeed
。 ic.sSh_w3N6ER.webp
最後の2つのフレックスボックス
http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/flexbox/quick/475x297xflex03.gif .pagespeed.ic.QuC9JhvmNd.webp

于 2013-02-18T10:47:36.463 に答える