选定选项卡的CSS选项卡问题答案

【问题标题】：css tab issue with selected tab选定选项卡的CSS选项卡问题
【发布时间】：2014-02-10 17:42:00
【问题描述】：

您好，我正在尝试为我在网上找到的标签示例设置样式。这是示例：

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

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

之后（选中的标签有边框）

如何解决这个问题？

【问题讨论】：

标签： css tabs

【解决方案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

希望对你有帮助:)

【讨论】：

谢谢一百万，但问题是这样删除了所有内容的顶部边框，我只想删除与所选标签冲突的部分