为什么我的导航列表不浮剩下什么？ [英] Why isn't my navigation list not floating left?
问题描述
而不是被给主部分的左侧，这是它的上方。我不确定这是为什么。
#sidebar {
浮动：左;
}
＆LT;身体GT;
＆LT; DIV CLASS =页＆GT;
＆LT;报头GT;
＆LT; DIV ID =标题＆GT;
＆LT; H1＆gt;我MVC应用程序＆LT; / H1＆GT;
＆LT; / DIV＆GT;
＆LT; DIV ID =logindisplay＆GT;
欢迎＆LT;强＆GT; @ User.Identity.Name＆LT; / STRONG＆GT;！
＆LT; / DIV＆GT;
＆LT;＆导航GT;
＆LT; UL ID =菜单＆GT;
＆LT;立GT; @ Html.ActionLink（家，索引，家庭）＆LT; /李＆GT;
＆LT;立GT; @ Html.ActionLink（关于，关于，家庭）＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / NAV＆GT;
＆LT; /头＆GT;
＆LT; NAV ID =侧边栏＆GT;
去...
＆LT; UL＆GT;
＆LT;李＆gt;首先移动到月亮和LT; /李＆GT;
＆LT;李＆gt;首先移动到月亮和LT; /李＆GT;
＆LT;李＆gt;首先移动到月亮和LT; /李＆GT;
＆LT;李＆gt;首先移动到月亮和LT; /李＆GT;
＆LT;李＆gt;首先移动到月亮和LT; /李＆GT;
＆LT;李＆gt;首先移动到月亮和LT; /李＆GT;
＆LT;李＆gt;首先移动到月亮和LT; /李＆GT;
＆LT;李＆gt;首先移动到月亮和LT; /李＆GT;
＆LT;李＆gt;首先移动到月亮和LT; /李＆GT;
＆LT;李＆gt;首先移动到月亮和LT; /李＆GT;
＆LT;李＆gt;首先移动到月亮和LT; /李＆GT;
＆LT;李＆gt;首先移动到月亮和LT; /李＆GT;
＆LT;李＆gt;首先移动到月亮和LT; /李＆GT;
＆LT;李＆gt;首先移动到月亮和LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / NAV＆GT;
＆lt;节ID =主＆GT;
@RenderBody（）
＆LT; /节＆gt;
＆LT;页脚GT＆;
＆LT; /页脚＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
这是很难发现问题的CSS没有所有相关的CSS。看来你发布一个新的Asp.Net MVC应用程序的默认共享布局视图与另外一个导航股利。但是，如果没有所有的CSS是不可能的知道究竟是错的。有一个问题我看到的是，你的 #sidebar CSS是不是由＆LT挤包;花柱＆GT; 标记。它应该是这样的：
＆LT;风格＆GT;
#sidebar
{
浮动：左;
}
＆LT; /风格＆GT;
另外要解决的CSS异常的最简单快捷的方法是使用developler工具，无论是FF或Chrome检查您的标记样式。如果检查侧边栏 div的CSS，你将看到浮动：左的风格是没有得到应用与code您发布，这将导致你推断，你要么没有引用CSS或没有正确申报。
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>
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.
这篇关于为什么我的导航列表不浮剩下什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
