0

ロゴの位置を指定しようとすると、画面上で問題ないように見えます。しかし、画面を小さくしたり、電話からブラウジングしたりすると、ロゴが中央に移動するか、ヘッダーからはみ出してしまいます。メニューにも同じ問題があります。なぜこれが起こるのですか？

CSS:

#logo {
    margin-left: 20%;
    padding: 20px;
    float: left;
}

.navigation {
    list-style: none;
    font-family: Arial;
    float: left;
    margin-left: 400px;
    margin-top: 20px;
}

.navigation li {
     display: inline-block;
     margin: 10px;
}

HTML:

<header>
    <div class="header">
    <div id="logo"><img src="img/logo.png"></div>
        <div id="headnav">
            <ul class="navigation">
                <li>Home</li>
                <li>Shop</li>
                <li>Rank</li>
                <li>Free</li>
            </ul>
        </div>
    </div>
    <div class="secondheader">
    </div>
    <div class="thirdheader">
    </div>
</header>
4

3 に答える 3

2

あなたのマージンは大きすぎます。そのため、小さな画面ではそのように見えます。ロゴのスタイルは次のとおりです。

margin-left: 350px;
padding: 20px;
float: left;

これにより、350px のマージンが得られます。その後、メニューに 400px の大きなマージンがあり、それらを合計すると、通常のデバイスの解像度自体よりも大きくなります。

于 2012-08-16T21:45:38.977 に答える
0

コメントごとに、左側にロゴ画像、右側にナビゲーションテキストが必要です。最も簡単な解決策は、画像を左にフロートさせ、ナビゲーションを右にフロートさせ、フロートをクリアすることです。

その場合、HTMLは次のようになります。

<header>
    <div class="header">
        <div id="logo"><img src="img/logo.png"></div>
            <div id="headnav">
                <ul class="navigation">
                    <li>Home</li>
                    <li>Shop</li>
                    <li>Rank</li>
                    <li>Free</li>
                </ul>
            </div>
        <div class="clear"></div>
        </div>
...

そして、CSSで：

#logo {
    float: left;
}
.navigation {
    float: right;
}
.clear {
    clear: both;
}

JSFiddleの例を作成しました。（画像は、わかりやすくするために明示的に大きいサイズになっています、参考までに。結果パネルのサイズを変更して、違いを確認できます。）

于 2012-08-16T22:10:48.303 に答える
0

ヘッダーの中央に配置しようとしていると思います。（もしそうなら、あなたはそれを間違っています:P）

margin:0 auto;そのためには、ある種のコンテナで使用する必要があります。

私はあなたがこのようなものが欲しいと思います:

HTML

<div class="header">
  <div class="margin-center">
    <div id="logo">
      LOGO
    </div>
    <div id="nav">
      stuff on the right
    </div>
  </div>
</div>

CSS

.header{width:100%;}
.margin-center{margin:0 auto;max-width:960px;}
#logo{float:left;}
#nav{float:right;}

編集:そこにある他のすべてのスタイルが原因で、機能しなかった可能性があります。

できれば、これを試してください -

これを CSS に追加します

.margin_center {
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    top: 19px;
    min-width: 600px;
}
#headnav {
    float: right;
}

あなたのCSSでこれを変更してください

#logo {
    margin-left: 350px;
    padding: 20px;
    float: left;
}

に

#logo {
    float: left;
}

そしてこれを変更

.navigation {
    list-style: none;
    font-family: Arial;
    float: left;
    margin-left: 400px;
    margin-top: 20px;
}

に

.navigation {
    list-style: none;
    font-family: Arial;
}

そして、この HTML を変更します

<div class="header">
    <div id="logo"><img src="img/logo.png"></div>
    <div id="headnav">
        <ul class="navigation">
            <li>Home</li>
            <li>Shop</li>
            <li>Rank</li>
            <li>Free</li>
        </ul>
    </div>
</div>

に

<div class="header">
    <div class="margin_center">
        <div id="logo"><img src="img/logo.png"></div>
        <div id="headnav">
            <ul class="navigation">
                <li>Home</li>
                <li>Shop</li>
                <li>Rank</li>
                <li>Free</li>
            </ul>
        </div>
    </div>
</div>
于 2012-08-16T21:55:36.377 に答える