如何停止嵌套列表重叠父列表? [英] How to stop nested list overlapping parent list?
本文介绍了如何停止嵌套列表重叠父列表?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
请参阅: http://jsfiddle.net/wHztz/67/
在这个例子中,颜色是背景图像的占位符,我注意到当 display:block
.innerLeft ul li a
但后来无法正确显示背景图片。
In this example the colors are placeholders for background images, I noticed the nested list stops overlapping when the display:block
is removed from .innerLeft ul li a
but then the background images wont show correctly.
CSS。有没有解决的办法?非常感谢!
I don't have much experience with CSS. Is there a way around this? Thanks!
HTML:
<div class="innerLeft">
<ul>
<li><a href="">Fruit</a></li>
<li>
<ul>
<li><a href="">Apples</a></li>
<li><a href="">Apples</a></li>
<li><a href="">Apples</a></li>
<li><a href="">Apples</a></li>
<li><a href="">Apples</a></li>
<li><a href="">Apples</a></li>
<li><a href="">Apples</a></li>
<li><a href="">Apples</a></li>
</ul>
</li>
<li><a href="">Vegetable</a></li>
</ul>
</div>
CSS :
.innerLeft ul {
width:199px;
float:left;
margin:0px;
padding:0px 0 0 12px;
list-style:none;
min-height:10px;
}
.innerLeft ul li{
padding:0px;
margin:0px 0 10px 0;
height:18px;
}
.innerLeft ul li a{
background: red;
display:block;
}
.innerLeft ul li ul li a{
background: blue;
}
推荐答案
.innerLeft ul li {
clear: left; /* Added */
padding:0px;
margin:0px 0 10px 0;
height:18px;
}
这篇关于如何停止嵌套列表重叠父列表?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文