0

私はこのサイトwww.virtualcloudguru.comを持っています。ここでの問題は、ヘッダー (ロゴとメニュー) です。ロゴとメニューの両方に固定の 100 ピクセルのパディングを定義しましたが、画面の解像度が変わると左右にシフトします。

現在、2つの方法があります

  1. 両方を画面中央に揃える
  2. 画面の解像度に応じて 2 つの要素の位置を変更します。

コードをjsfiddleにコピーしました。完全ではありませんが

4

3 に答える 3

2

画面の解像度に応じて要素の位置を変更したい場合は、CSS メディア クエリを使用できます。あなたのページで動作する例を次に示します。

@media screen and (max-width: 600px) {
    #header .top-logo, #header ul {
        padding-left: 0;
    }
}

@mediaこの行は、CSS の「if」ステートメントに似ていると考えることができます。この場合、メディアがスクリーン (つまり、印刷などではない) で、最大幅が 600 ピクセルの場合、ロゴの左パディングを 0 にして、ヘッダーにリストします。

つまり、このセクション内の CSS ルール@mediaは、ブラウザーの表示ウィンドウ幅が 600 ピクセル以下の場合にのみ有効であり、その場合、以前の CSS ルールは上書きされます。

これを CSS の最後に追加し、ブラウザのウィンドウを狭めて効果を確認してください。

編集:複数の@mediaセクションがあっても問題ないことを追加するのを忘れていました。たとえば、max-width: 480px小さな画面用のルールを含む (または類似の) 2 番目のセクションを追加できます。

編集 2: ロゴとメニューの中央揃え

ロゴの幅は固定なので、ブロック要素にして をmargin: 0 auto次のように使用できます。

#header .top-logo {
    display: block;
    margin: 0px auto;
    padding: 0;
    width: 425px;
}

既存のfloat: left.

メニューの場合、これは単なるテキストなので、 を使用できますtext-align: center。繰り返しますが、既存のfloat: lefton 要素を削除することを忘れないでください —display: inline代わりに使用します。

#header ul {
    padding: 0;
    text-align: center;
}
#header ul li {
    display: inline;
}

ちなみに、実装する前にこのクロスブラウザを再確認してください。

于 2012-10-15T03:17:42.620 に答える
1

このCSSを使用してください

#header {
    width: 1130px;
    padding: 0;
}

#header .top-logo {
    padding: 0;
}

スクリーンショット

スクリーンショット

于 2012-10-15T02:51:43.850 に答える
0

ヘッダーをページの本文に対して常に同じ位置に配置したい場合は、2 つを共通の div に配置し、本文に適用した幅: およびマージン: プロパティをそのコンテナーに適用します。 .

代わりに、要素を共通のコンテナとして使用し、bodyそれに幅とマージンを適用することもできます。

于 2012-10-15T02:52:18.433 に答える