gpt4 book ai didi

html - css - div 使用嵌套列表重叠

转载 作者:太空宇宙 更新时间:2023-11-04 03:50:34 25 4
gpt4 key购买 nike

这个简化的 html/css 表明嵌套列表后面的 div 似乎没有正确放置。为什么列表末尾下方没有灰色 (#eee) div? (它有一个明确的:两者)它似乎在“一,二,三”之下,而不是“阿尔法,贝塔, Gamma ”。

<html>
<head>
<style>
body { padding:0; border:0; margin:0; }
#bodydiv { outline:1px dashed black; }
li { width:100px; height:50px; outline:1px dotted blue; }
</style>
</head>
<body>
<div id="bodydiv">
<div style="outline:1px dotted black;">
<ul>
<li>One</li>
<li>Two</li>
<li>Three
<ul>
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
</ul>
</li>
</ul>
</div>
<div style="clear:both; height:20px; background:#eee;">--First--</div>
<div style="width:100px; height:50px; background:#fdd; outline:1px dotted red;"></div>
<div style="width:100px; height:50px; background:#dfd; outline:1px dotted red;"></div>
<div style="width:100px; height:50px; background:#ddf; outline:1px dotted red;"></div>
</div>
</body>
</html>

最佳答案

您正在为包含嵌套 ulli 指定一个特定的 height,因此它不会按照您想要的方式呈现。只需为该元素声明一个最小高度 min-height 而不是固定的 height ,你就可以摆脱 clear:both ,它确实这里真的什么都没有:

li {
width:100px;
min-height:50px;
outline:1px dotted blue;
}

在这里查看:http://jsbin.com/zowusegu/2/edit/

关于html - css - div 使用嵌套列表重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23460627/

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