css - 为什么我的导航列表不向左浮动?

标签 css asp.net-mvc html css-float

它不是在主要部分的左侧,而是在它的上方。我不确定为什么。

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

最佳答案

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

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

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

关于css - 为什么我的导航列表不向左浮动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10319409/

相关文章:

html - 创建响应式网格布局,其中所有元素在垂直和水平方向上彼此等距

html - 如何在不嵌套额外容器的情况下垂直对齐内容?

c# - 在 mvc 中填充模型列表属性

asp.net-mvc - ASP.NET MVC 将列表传递给 RouteData QueryString

html - 使用 css 到达树结构内部的 html div

css - IE8 不识别 HTML5(即使有 shiv)

javascript - 如何每次旋转CSS立方体

asp.net-mvc - 使用 ASP.NET MVC 查询字符串中的身份验证 token 对用户进行身份验证

在网页上仅使用 JavaScript 上传文件

javascript - 提交更改输入字段的表单