jquery - 为什么背景颜色不显示？

Question

我正在尝试制作 DEMO 的 html 和 css。我给 div 背景颜色，效果很好。但是，当我将 position 属性赋予其子项时，背景颜色属性不起作用。为什么？

例如，当我在 ul 中删除此属性时背景颜色显示。但是当我将此属性应用于 ul 时背景颜色不显示，为什么？

ul{
position:absolute;
right:0px;
}

代码

<div style="background:blue;position:relative">
<ul><li><a></a>aa</li><li><a>h</a></li></ul>

</div>

Answer 1

由于 div 的所有内容都是绝对定位的，div 实际上没有高度。您将需要手动设置 div 的高度。

如果 div 的内容都是 float 的，也会发生类似的事情；但是，解决此问题的方法是在包含的 div 上使用 overflow:hidden;。您可以在 this fiddle 上看到这个演示.它实际上产生了我假设您想要达到的结果。

<div style="background:blue;position:relative;overflow:hidden;">
    <ul><li><a></a>aa</li><li><a>h</a></li></ul>
</div>



ul{
    float:right
}