0

私は誰かのためにウェブサイトを作っていますが、画面の解像度とブラウザのズームに応じてサイズを変更したいと思っています（スマートフォンは含まれていません）。私は現在そのようなメニューを持っています： ここに画像の説明を入力してください

メニューのすべての要素はdivにあり、ここにcssがあります。

#barre_utilisateur //For the menu bar(the red bar)
{
    height:45px;
    background-color:#A31E39;
    width:100%;
}
#content_boutton_accueil //the home button
{
    margin-left:2%;
    width:200px;
    display:inline-block;
}
#notification //exclamation mark button
{
    cursor:pointer;
    width:60px;
    height:45px;
    display:inline-block;
}

そして今、私は歯車のアイコンをユーザーボタンの左側の右側にあるスティックにしたいです。どうすればこれを達成できるかわかりません。

また、ズームインしすぎると、メニューの右側の部分が本来あるべき場所から外れてしまいます。これを防ぐ方法はありますか？

私が達成しようとしていることの良い例は、新しいOutlookライブページです。

4

1 に答える 1

1

全体的なメニュー div (#barre_utilisateur) を相対的に配置してから、その子をその中に絶対的に配置できます。例えば：

#barre_utilisateur {
   position: relative;
} 

#cogwheel {
   position: absolute;
   right: 0;
}

もう 1 つの方法は、メニュー内に 2 つの div を配置し (#barre_utilisateur)、最初の 1 つを左に、もう 1 つを右にフロートさせることです。

于 2012-12-01T14:28:53.957 に答える