Question

不是位于主要部分的左侧，而是位于主要部分的左侧。我不确定为什么。

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

Answer 1

如果没有所有相关的CSS，很难发现CSS问题。您似乎发布了新的Asp.Net MVC应用程序的默认共享布局视图，并添加了导航div。但是如果没有所有的CSS，就无法确定究竟是什么问题。我看到的一个问题是#sidebar css没有被<style>标记包裹。它应该是这样的：

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

解决css异常的最简单，最快捷的方法是使用FF或Chrome中的developler工具来检查标记样式。如果您检查了sidebar div的css，您会看到float:left样式未应用您发布的代码，这会导致您推断出您没有引用css或没有正确地宣布它。

Answer 2

您的导航列表向左浮动。为了确定出了什么问题，您需要更加具体地了解您所看到的内容和您期望的内容。你使用的是什么浏览器？

我认为您已经注意到正文文本在导航栏旁边被压扁，而页脚不会在其下方结束。我在页脚中添加了一些边框和clear:both;以更好地说明结构。

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

为什么我的导航列表没有浮动？

2 个答案: