0

複数の列 ( jsFiddle )を持つメニューがあります。引き続き列を追加するか、ブラウザーのサイズを変更して幅を狭くすると、メニュー列が 2 行目に移動することがわかりました。これは CSS 属性によるものですfloat: left;。

CSS

#menus {
    border: 1px solid #F00;
}
#menus .menu {
    border: 1px solid #00F;
    float: left;
    min-width: 200px;
    height: 100%;
}

HTML コードは非常に長いため、詳細については jsFiddle を参照してください。

各列の絶対位置を固定せずに (2 行目に変更せずに) メニューを 1 行に配置するにはどうすればよいですか? jQuery は Web サイトの他の部分で使用されますが、レイアウトでは JavaScript に依存しないことをお勧めします。

注: ブラウザー間の互換性を考慮してください。IE 6 以上のサポートが推奨されます。

4

2 に答える 2

2

最適化されたソリューションではありませんが、次を使用できます。

#menus {
    border: 1px solid #F00; white-space:nowrap;

}
#menus .menu {
    border: 1px solid #00F;
    /*float: left;*/ display:inline-block;
    min-width: 200px;
    height: 100%;
}
于 2013-09-05T08:34:44.857 に答える
0

すべてのメニューを 1 行に表示したい場合は、この Css を使用してください。

 #menus {
    border: 1px solid #F00;
    display: table;
    }
    #menus .menu {
    border: 1px solid #00F;
    display: table-cell;
    min-width: 200px;
    height: 100%;
    }

全角メニューが必要な場合は、使用できます

   #menus {
    border: 1px solid #F00;
    display:table;
    width:100%;
}
#menus .menu {
    border: 1px solid #00F;
    display:table-cell;
    min-width: 18%;
    height: 100%;    
}
于 2013-09-05T08:42:39.410 に答える