Html 使用嵌套列表的css-div重叠

这个简化的html/css显示嵌套列表后面的div似乎没有正确放置。为什么灰色（#eee）div不在列表末尾下方？（它有一个明确的：两者）它似乎低于“一，二，三”，但不是“α，β，γ”

正文{填充：0；边框：0；边距：0；}
#bodydiv{轮廓：1px黑色虚线；}
li{宽度：100px；高度：50px；轮廓：1px点蓝色；}

一个
两个
三

阿尔法
贝塔
伽马射线



--首先--

您正在为包含嵌套的

ul

的

li

指定一个特定的

高度

，因此它不会以您想要的方式呈现。只需为该元素声明一个最小高度

min height

，而不是一个固定的

height

，您就可以摆脱

清除：两者都是
，在这里它实际上什么都不做：

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

看看这里：
哦，老鼠（我花了很长时间在这上面）。我清楚地知道：两者在这里都不合适。非常感谢。
li {
    width:100px;
    min-height:50px;
    outline:1px dotted blue;
}