gpt4 book ai didi

html - 如何停止嵌套列表重叠父列表?

转载 作者:行者123 更新时间:2023-11-27 22:28:17 46 4
gpt4 key购买 nike

参见此处:http://jsfiddle.net/wHztz/67/

在此示例中,颜色是背景图像的占位符,我注意到当从 .innerLeft ul li a 中删除 display:block 时,嵌套列表停止重叠,但随后背景图片无法正确显示。

我对 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/

关于html - 如何停止嵌套列表重叠父列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20886161/

46 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com