0

この例には問題があります: http://jsfiddle.net/JYkUS/

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>FSou1::Верстка макета</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div class="logo-wrapper">
            <div class="logo">
                <a href="#">
                    <img src="images/logo.png" alt="Logo" width="90" height="90" />
                </a>
            </div>
            <div class="logo-text">
                <span>Happy Nanny</span>
            </div>
            <div class="menu">
                <ul>
                    <li class="first"><a href="#">HOME</a></li>
                    <li><a href="#">SERVICES</a></li>
                    <li><a href="#">NEWS & PRESS</a></li>
                    <li><a href="#">FIND JOB</a></li>
                    <li><a href="#">CONTACTS</a></li>
                </ul>
            </div>
            <div class="clear"></div>
        </div>

        <div class="header">
            <div class="header-text">
                <span class="easy-way">THE EASY WAY</span>
                <span class="find-the-best">TO FIND THE BEST</span>

                <div class="clear"></div>

                <p>babysitters, childminders, nannies or private tutors</p>
            </div>
        </div>  
    </body>
</html>

テキストでスパン

<span class="easy-way">THE EASY WAY</span>

デフォルトではmargin-leftがありますが、その理由はわかりません。margin-left に負の値を設定したくありません。このスパンを左の境界線に揃えることは可能ですか?なぜそのような値のマージンがあるのですか?

PS Watched in Google Chrome (firefox にはこのマージンがありません)

ここに画像の説明を入力

編集：

このスタイルを削除すると:

.logo-wrapper .logo, .logo-wrapper .logo-text {
float: left;
}

私のスパンは左ボーダー=\に行きますが、なぜそうなのですか?

EDIT2：他の方法として、<div class="clear"></div>「ロゴラッパー」コンテナからルートレベルに移動するには

<div class="logo-wrapper">
            <div class="logo"></div>
            <div class="logo-text"></div>
            <div class="menu"></div>
            <!-- FROM HERE -->
        </div>

        <div class="clear"></div> <!-- MOVE HERE -->

        <div class="header">
            <div class="header-text">
                <span class="easy-way">THE EASY WAY</span>
                <span class="find-the-best">TO FIND THE BEST</span>

                <div class="clear"></div>

                <p>babysitters, childminders, nannies or private tutors</p>
            </div>
        </div>

しかし、まだ理解できません。内部の clear:both div の後にフローティングが機能する理由

EDIT3: float:right メニューが clear:both の div よりも「右」になるためですか?

4

2 に答える 2

1

余白は実際には body タグに適用されます。次を使用して削除できます。

body {
    background: none repeat scroll 0 0 #F8F7E5;
    font-family: Arial;
    font-size: 100%;
    margin-left: 0;
    margin-top: 40px;
}

作業例: http://jsfiddle.net/JYkUS/2/

これは通常、reset.cssブラウザ固有のスタイルをページからすべて削除するファイルを使用して処理されるため、クロスブラウザ対応の Web ページを作成する際に単一のベース ポイントから開始できます。このような戦略をサイトに適用することをお勧めします。

于 2013-03-07T10:41:16.727 に答える
0

それは、ボディmarginをに設定していないためです0

成功するmargin:40px 0 0 0

body {
    margin: 40px 0 0 0;
    font-size: 100%;
    font-family: Arial;
    background: #f8f7e5;
}

デモ

于 2013-03-07T10:43:28.823 に答える