asp.net – 当我浮动列表元素时,为什么列表的背景颜色会消失？

发布时间：2020-12-16 06:25:54 所属栏目：asp.Net 来源：网络整理

导读：我浮动我的无序列表元素的那一刻……背景颜色失败了.为什么？ style type="text/css" .bkgrd-blue { background-color: #094AB2; } .application-bar { color: #FFFFFF; } .application-bar ul { } .application-bar ul.control-bar { list-style: none outs

我浮动我的无序列表元素的那一刻……背景颜色失败了.为什么？

<style type="text/css">

    .bkgrd-blue { background-color: #094AB2; }

    .application-bar { color: #FFFFFF; }

    .application-bar ul { }
    .application-bar ul.control-bar { list-style: none outside none; margin: 0; overflow: visible; padding: 0; }

    .application-bar ul.control-bar.branding { float: left;}
</style>

<div class="application-bar bkgrd-blue">
    <ul class="control-bar">
        <li>
            This is working!
        </li>
    </ul>
</div>

<div class="application-bar bkgrd-blue">
    <ul class="control-bar branding">
        <li>
            The moment I float this...it fails! Why?
        </li>
    </ul>
</div>

解决方法

浮动元素会将其从正常文档流中删除,因此容器不会展开 – 也就是说,包含div的高度为0.

要解决此问题,您需要清除浮动.你可以：

>设置溢出：隐藏在div上
>浮动div
>在浮动列表之后添加一个带有clear的元素：both – 这可以使用：after伪元素完成

这是使用第一个解决方案的演示：http://jsfiddle.net/FSH4Y/

我补充说：

.application-bar {
    color: #FFFFFF;
    overflow: hidden;
}

以下是有关此问题的更多信息：CSS Tricks: All About Floats – 请查看名为The Great Collapse的部分

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!