Why isn't my navigation list not floating left?

问题

Instead of being to the left of the main section, it's above it. I'm unsure why.

#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>

回答1:

It is difficult to spot CSS problems without all the relevant CSS. It appears you posted the default shared layout view of a new Asp.Net MVC application with the addition of a navigation div. But without all the css it is impossible to be sure what exactly is wrong. One problem I do see is that your #sidebar css is not wraped by the <style> tag. It should be like this:

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

Also the easiest and quickest way to solve css anomalies is to use the developler tools in either FF or Chrome to inspect your markup styles. If you inspected the sidebar div's css, you will see that the float:left style is not getting applied with the code you posted, which should lead you to deduce that you either did not reference the css or did not declare it correctly.

回答2:

Your navigation list is floating to the left. In order to determine what's going wrong you'll need to be a little more specific about what you are see and what you are expecting. What browser are you using?

I assume that you have noticed that the body text is squished right next to the nav and the footer does not end up below it. I have added some borders and a clear:both; to the footer to better illustrate the structure.

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

来源：https://stackoverflow.com/questions/10319409/why-isnt-my-navigation-list-not-floating-left

标签

css

asp.net-mvc

html5

css-float