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

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

我假设您已经注意到正文文本在导航旁边被压扁，并且页脚没有在它下方结束。我clear:both;在页脚中添加了一些边框和 a 以更好地说明结构。

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

于 2012-04-25T16:26:24.507 回答
1

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

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

此外，解决 css 异常最简单快捷的方法是使用 FF 或 Chrome 中的开发人员工具来检查您的标记样式。如果您检查了sidebardiv 的 css，您将看到float:left样式未与您发布的代码一起应用，这应该会导致您推断您没有引用 css 或没有正确声明它。

于 2012-04-25T16:24:26.913 回答