0

メインセクションの左側ではなく、その上にあります。理由はわかりません。

#sidebar {
    float:left;
}


<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                Welcome <strong>@User.Identity.Name</strong>!
            </div>
            <nav>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </nav>
        </header>
        <nav id="sidebar">
            Go To...
            <ul>
                <li>First Move to Moon</li>
                <li>First Move to Moon</li>
                <li>First Move to Moon</li>
                <li>First Move to Moon</li>
                <li>First Move to Moon</li>
                <li>First Move to Moon</li>
                <li>First Move to Moon</li>
                <li>First Move to Moon</li>
                <li>First Move to Moon</li>
                <li>First Move to Moon</li>
                <li>First Move to Moon</li>
                <li>First Move to Moon</li>
                <li>First Move to Moon</li>
                <li>First Move to Moon</li>
            </ul>
        </nav>
        <section id="main">            
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
</body>
4

2 に答える 2

1

関連するすべてのCSSがないと、CSSの問題を見つけることは困難です。ナビゲーションdivを追加して、新しいAsp.NetMVCアプリケーションの既定の共有レイアウトビューを投稿したようです。しかし、すべてのcssがなければ、正確に何が間違っているのかを確認することは不可能です。私が見ている問題の1つは、#sidebarcssが<style>タグでラップされていないことです。次のようになります。

<style>
    #sidebar
    {
        float: left;
    }
</style>

また、cssの異常を解決する最も簡単で迅速な方法は、FFまたはChromeの開発者ツールを使用してマークアップスタイルを検査することです。sidebardivのcssを調べた場合float:left、投稿したコードにスタイルが適用されていないことがわかります。これにより、cssを参照していないか、正しく宣言されていないことが推測されます。

于 2012-04-25T16:24:26.913 に答える
1

ナビゲーションリストは左側に浮かんでいます。何がうまくいかないかを判断するには、何が表示され、何が期待されているかについて、もう少し具体的にする必要があります。どのブラウザを使用していますか？

本文がナビゲーションのすぐ隣で押しつぶされており、フッターがその下に表示されていないことに気付いたと思います。clear:both;構造をわかりやすく説明するために、フッターにいくつかの境界線とaを追加しました。

http://jsfiddle.net/frGtX/8/

于 2012-04-25T16:26:24.507 に答える