div 没有出现在兄弟导航栏 div 下方？
Posted
技术标签:
【中文标题】div 没有出现在兄弟导航栏 div 下方？【英文标题】：div not appearing below brother navbar div? 【发布时间】：2016-06-03 10:08:54 【问题描述】：我是一个业余爱好者，我不确定为什么这个 div 没有出现在导航栏 div 的下方。我引用的 div 是 #sponsorBar div。
感谢您的帮助，如果我需要添加任何其他信息，请告诉我。
body
background-color:black;
margin:0;
padding:0;
#navBar
position:fixed;
float:left;
background-color:white;
text-align:center;
height: 50px;
width:100%;
margin:0;
padding:0;
top:0;
#navList
display:inline-block;
list-style-type: none;
margin: 0;
padding: 0;
background-color:white;
#navList li
float:left;
#navList li:nth-child(1)
border-left: 0;
#navList li:nth-child(3)
margin-right: 100px;
#navList li:nth-child(5)
margin-left: 100px;
#navList li:nth-child(7)
border-right: 0;
#navList li a
display:inline-block;
font-family:'Helvetica Neue', Helvetica, sans-serif;
font-weight:bold;
text-decoration:none;
color:black;
font-size:1.2em;
vertical-align:-17px;
margin: 0;
padding: 0;
height:50px;
#navList li:hover
background-color: black;
#navList li:hover a
color:white;
.navImage
float:left;
display:block;
margin:0;
padding:0;
max-height: 50px;
.navImage:hover
background-color: white;
.navListItem_left
border-left: 1px solid black;
height: 50px;
width:100px;
.navListItem_right
border-right: 1px solid black;
height: 50px;
width:100px;
#sponsorBar
clear:left;
position:relative;
display:block;
background-color:white;
height:100px;
width:80%;
margin:100px;
<div id="navBar">
<ul id="navList" class="navListItem">
<li class="navListItem_left">
<a href="index.html">Home</a>
</li>
<li class="navListItem_left">
<a href="teams.html">Teams</a>
</li>
<li class="navListItem_left">
<a href="articles.html">Articles</a>
</li>
<li>
<a href="/index.html">
<img src="img/simplify_black_transparent_500x500.gif" class="navImage"/>
</a>
</li>
<li class="navListItem_right">
<a href="menu5.html">Menu4</a>
</li>
<li class="navListItem_right">
<a href="about.html">About Us</a>
</li>
<li class="navListItem_right">
<a href="partners.html">Partners</a>
</li>
</ul>
</div>
<!--Sponsor Div-->
<div id="sponsorBar">
<p style="color:red;">TEST</p>
</div>https://jsfiddle.net/abelgoodwin1988/a6tthq9k/
【问题讨论】：
移除位置：从 #navBar 固定。 让我检查一下 chrome。在 FF 中它工作正常。 在 chrome 中也有同样的结果。看起来不错。我正在使用最新版本的 chrome。即 50.0.2 这个截图。 i.stack.imgur.com/ZtRJh.png 这是版本截图。 i.stack.imgur.com/9hjBh.png 可能是但是。它也应该在该版本中工作。因为。没有什么比不工作更重要的了。尝试清除缓存。要么。重新安装 chrome。 【参考方案1】：哇！那太奇怪了！由于某种原因，JSFiddle 不喜欢 id “sponsorBar”。我不知道为什么。当我将 id（和相应的 CSS 代码）更改为 sB 时，它没有问题！！
https://jsfiddle.net/a6tthq9k/3/ HTML：
<body>
<!--Navigation Div-->
<div id="navBar">
<ul id="navList" class="navListItem">
<li class="navListItem_left">
<a href="index.html">Home</a>
</li>
<li class="navListItem_left">
<a href="teams.html">Teams</a>
</li>
<li class="navListItem_left">
<a href="articles.html">Articles</a>
</li>
<li>
<a href="/index.html">
<img src="img/simplify_black_transparent_500x500.gif" class="navImage"/>
</a>
</li>
<li class="navListItem_right">
<a href="menu5.html">Menu4</a>
</li>
<li class="navListItem_right">
<a href="about.html">About Us</a>
</li>
<li class="navListItem_right">
<a href="partners.html">Partners</a>
</li>
</ul>
</div>
<!--Sponsor Div-->
<div id="sB">
<p style="color:red;">TEST</p>
</div>
<!--Content Div-->
</body>
CSS：
body
background-color:black;
margin:0;
padding:0;
#navBar
position:fixed;
float:left;
background-color:white;
text-align:center;
height: 50px;
width:100%;
margin:0;
padding:0;
top:0;
#navList
display:inline-block;
list-style-type: none;
margin: 0;
padding: 0;
background-color:white;
#navList li
float:left;
#navList li:nth-child(1)
border-left: 0;
#navList li:nth-child(3)
margin-right: 100px;
#navList li:nth-child(5)
margin-left: 100px;
#navList li:nth-child(7)
border-right: 0;
#navList li a
display:inline-block;
font-family:'Helvetica Neue', Helvetica, sans-serif;
font-weight:bold;
text-decoration:none;
color:black;
font-size:1.2em;
vertical-align:-17px;
margin: 0;
padding: 0;
height:50px;
#navList li:hover
background-color: black;
#navList li:hover a
color:white;
.navImage
float:left;
display:block;
margin:0;
padding:0;
max-height: 50px;
.navImage:hover
background-color: white;
.navListItem_left
border-left: 1px solid black;
height: 50px;
width:100px;
.navListItem_right
border-right: 1px solid black;
height: 50px;
width:100px;
#sB
clear:left;
position:relative;
display:block;
background-color:white;
height:100px;
width:80%;
margin:100px;
【讨论】：
哇...这里也一样.. 不只是 JSFiddle，它是 chrome.. wtffff？这是一些奇怪的嘶嘶声 Keith.. 奇怪的嘶嘶声...... 这是广告拦截！我刚刚检查了一下，是的！果然，当我关闭它时它工作正常！。以上是关于div 没有出现在兄弟导航栏 div 下方？的主要内容，如果未能解决你的问题，请参考以下文章