CSS选项卡问题与选定的选项卡

debugcn 发表于 Dev

马赫迪

嗨，我正在尝试设置我在网上找到的选项卡示例的样式。这是示例：

<html>
<head>
    <meta charset="utf-8">
    <title>Tabs 2</title>
    <style>
    body {
        font: 0.8em arial, helvetica, sans-serif;
    }

    #header ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #header li {
        float: left;
        border: 1px solid;
        border-bottom-width: 0;
        margin: 0 0.5em 0 0;
    }

    #header a {
        display: block;
        padding: 0 1em;
    }

    #header #selected {
        position: relative;
        top: 1px;
        background: white;
    }

    #content {
        border: 1px solid;
        clear: both;
    }

    h1 {
        margin: 0;
        padding: 0 0 1em 0;
    }
    </style>
</head>

<body>

<div id="header">
    <ul>
        <li><a href="#">This</a></li>
        <li id="selected"><a href="#">That</a></li>
        <li><a href="#">The Other</a></li>
        <li><a href="#">Banana</a></li>
    </ul>
</div>

<div id="content">
    <p>Ispum schmipsum.</p>
</div>



</body>

</html>

问题是我想为标题添加背景色并将其宽度设置为100％。当我添加此CSS代码时，看到的区别是：

#header{
 width:100%;
 background-color:#b6ff00;
 overflow:hidden;
}

之前（所选选项卡与内容合并）

之后（所选选项卡的边框为底部）

如何解决这个问题？

克鲁纳尔·潘查尔（Krunal Panchal）

这是因为您要添加overflow:hidden标题，并且尚未清除浮点数

以下是解决方案

清除：两者

这是明确的定义

基于浮点数的布局的一个常见问题是，浮点数的容器不想拉伸以适应浮点数。例如，如果要在所有浮动对象周围添加边框，则必须以某种方式命令浏览器将容器一直拉长。

这是您的解决方案和快速修复

“清除”，二十一世纪风格

ul:after {
    clear: both !important;
    content: ".";
    display: block;
    float: none;
    font-size: 0;
}

这是小提琴http://jsfiddle.net/krunalp1993/g9N3r/4/

较旧的解决方案

的HTML

<div id="header">
    <ul>
        <li><a href="#">This</a></li>
        <li id="selected"><a href="#">That</a></li>
        <li><a href="#">The Other</a></li>
        <li><a href="#">Banana</a></li>
        <li class="clear"></li>
    </ul>
</div>

<div id="content">
    <p>Ispum schmipsum.</p>
</div>

的CSS

#header {
    background-color: #B6FF00;
    overflow: visible;
    position: relative;
    top: 1px;
    width: 100%;
}
.clear { clear : both; float:none !important}

小提琴http://jsfiddle.net/krunalp1993/g9N3r/3/

我刚刚展示了一种快速清除技术，还有很多其他方法

您可以查看更多方式http://www.quirksmode.org/css/clearing.html

希望它能对您有所帮助:)

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。