看这里:http://jsfiddle.net/wHztz/67/ http://jsfiddle.net/wHztz/67/
在此示例中,颜色是背景图像的占位符,我注意到当嵌套列表停止重叠时display:block
被移除自.innerLeft ul li a
但背景图像将无法正确显示。
我对 CSS 没有太多经验。有没有解决的办法?谢谢!
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;
}
http://jsfiddle.net/wHztz/70/ http://jsfiddle.net/wHztz/70/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)