[英]Gap Between <ul> and <div> in IE7
I am having trouble diagnosing what is causing a gap in a section of my page. 我无法诊断导致页面某一部分出现间隙的原因。 I searched SO and Google, however I could not pinpoint any helpful articles.
我搜索了SO和Google,但我无法查明任何有用的文章。 I have a container which contains a title, an unordered list and a div with information.
我有一个容器,其中包含一个标题,一个无序列表和一个包含信息的div。 The problem is a gap is occurring between the div and the ul.
问题是div和ul之间出现了差距。 I would like the div to be directly under the ul with no spaces.
我希望div直接在ul下没有空格。 An example can be seen here: http://jsfiddle.net/aAfU5/1/ (Remember IE7)
这里可以看到一个例子: http : //jsfiddle.net/aAfU5/1/ (记住IE7)
HTML HTML
<div id="center-panel">
<h1>Information</h1>
<ul class="clearfix">
<li class="bg1 border2">Regulation</li>
<li class="bg1 border2">Compliance</li>
<li class="bg1 border2">Resources</li>
</ul>
<div id="information-panel" class="border2">
This is where the content goes
</div>
</div>
CSS: CSS:
#center-panel {
height: 300px;
float: left;
width: 78%;
padding: 5px;
}
#center-panel ul {
padding: 0px;
margin: 0px;
}
#center-panel li {
color: white;
/*display:inline-block;*/
/*display:inline;*/
float: left;
font-weight: bold;
list-style-type: none;
margin: 0px 2px;
padding: 3px;
width: 100px;
}
#information-panel {
clear: both;
margin: 0px 2px;
}
h1 {
margin: 0 0 10px 0;
padding: 0;
font-size: 120%;
color: #01305E;
}
.bg1 {
background: #3C698E;
}
.border2 {
border: 1px solid #01305E;
}
It's your H1 margin that "spills" under the ul. 这是你的H1边际在ul下“溢出”。 Replace it with a padding :
用填充物替换它:
h1 {
margin: 0;
padding: 0px 0px 10px 0px;
font-size: 120%;
color: #01305E;
}
You could also add zoom to trigger haslayout 您还可以添加缩放以触发haslayout
#center-panel ul {
padding: 0px;
margin: 0px;
zoom:1;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.