Html 我的内联列表正在崩溃，如果我在其中添加了一些内容，我该怎么办？

若我把我的鼠标移到李家的任何一个地方，它就不合适了。我该怎么做才能修好它

演示

ul{
列表样式：无；
显示：块；
填充：0；
保证金：0；
}
ul.li图片{
保证金：0；
填充：0；
显示：内联块；
右边距：20px；
宽度：200px；
高度：200px；
背景色：红色；
明确：两者皆有；
}
ulli p{
显示：无；
宽度：100%；
背景：黑色；
颜色：白色；
}
ul li：悬停p{
显示：内联块；
}

索基纳觉



索基纳觉



索基纳觉



索基纳觉

奇怪的效果是由于悬停时将

显示

属性从

块

更改为

内联块

。如果您希望内容在悬停状态下显示，但在默认情况下隐藏，我建议使用属性

visibility

，而不是

display

ul{
列表样式：无；
显示：块；
填充：0；
保证金：0；
}
ul.li图片{
保证金：0；
填充：0；
显示：内联块；
右边距：20px；
宽度：200px；
高度：200px；
背景色：红色；
明确：两者皆有；
}
ulli p{
可见性：隐藏；
宽度：100%；
背景：黑色；
颜色：白色；
}
ul li：悬停p{
能见度：可见；
}

索基纳觉



索基纳觉



索基纳觉



索基纳觉

奇怪的效果是由于悬停时将

显示

属性从

块

更改为

内联块

。如果您希望内容在悬停状态下显示，但在默认情况下隐藏，我建议使用属性

visibility

，而不是

display

ul{
列表样式：无；
显示：块；
填充：0；
保证金：0；
}
ul.li图片{
保证金：0；
填充：0；
显示：内联块；
右边距：20px；
宽度：200px；
高度：200px；
背景色：红色；
明确：两者皆有；
}
ulli p{
可见性：隐藏；
宽度：100%；
背景：黑色；
颜色：白色；
}
ul li：悬停p{
能见度：可见；
}

索基纳觉



索基纳觉



索基纳觉



索基纳觉

只需使用flex；简单地使用flex；