0

次のサンプルコードがあります。

<!DOCTYPE html>
<html>
<head>
<title>Example Website</title>
<link rel="stylesheet" type="css" href="style.css">
</head>
<body>
    <div class="left_nav">1 2 3</div>

    <div class="body_main">
        <div class="top_nav_right">Create account Log in</div>

        <div class="top_nav">
            <span>Article Talk</span> <span class="top_nav_right2">Read
                Edit View history</span>
        </div>
</body>
</html>

そして私のCSSで：

.body_main {
    margin-left: 11em;
}


.top_nav_right {
    float: right;
    margin-top: 1em;
    margin-bottom: 1em;
}

.top_nav {
    height: 2.5em;
    margin-top: 3em;
}


.top_nav_right2 {
    float: right;
}

「Read Edit View history」の下に「Create account Login」が表示される理由がわかりません。これらは両方とも div であり、Create の後に Read があります。

また、なぜかChromeだけCSSが表示されます。CSSをバリデーターに入れました

4

3 に答える 3

2

問題は、フロートをクリアしていないことです。

フロートする.top_nav_rightと、その下の要素が埋めようとする空間の隙間が作成されます。右に浮かせたので、余分なスペースが の左側になり.top_nav_right、その.top_nav内容が左側 (または前) に表示されます。

これを修正するに.top_nav_rightは、次の CSS 定義を.top_nav

clear: both;

ここでクリアの結果を見ることができます: http://jsfiddle.net/P7QTC/2/

ここでフロートを適切にクリアする理由と方法について詳しく知ることができます: http://css-tricks.com/the-how-and-why-of-clearing-floats/

<div>さらに、すべてのタグを必ず閉じる必要があります。.body_main終了タグがないことに気付きました。

于 2013-03-07T23:45:30.113 に答える
1

クラス「body_main」でdivのdivタグを閉じるのを忘れたと思います

于 2013-03-07T23:42:57.047 に答える
1

問題の一部は、<link>タイプが正しくないことです。読む必要がありますtype="text/css"。

于 2013-03-07T23:42:00.523 に答える