Question

您好我正在尝试设置我在网上找到的标签样本。这是样本：

<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;
}

之前（选定的标签与内容合并）

befor

之后（所选标签有边框底部）

after

如何解决这个问题？

Answer 1

这是因为您要将overflow:hidden添加到标题和你还没有清除花车

以下是解决方案

清除：这两个

以下是清晰
的定义
基于浮动的布局的一个常见问题是浮动的容器不希望伸展以容纳浮动。如果你想添加一个所有花车周围的边框，你必须以某种方式命令浏览器一直拉伸容器。

以下是解决方案和快速修复

“清算”，21世纪风格

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

希望它可以帮助你：）

选定选项卡的css选项卡问题

1 个答案: