所选选项卡的css选项卡问题_Css_Tabs

所选选项卡的css选项卡问题

css tabs

所选选项卡的css选项卡问题,css,tabs,Css,Tabs,嗨，我正在尝试设计我在网上找到的标签样本。以下是示例： <html> <head> <meta charset="utf-8"> <title>Tabs 2</title> <style> body { font: 0.8em arial, helvetica, sans-serif; } #header ul { list-style: n

嗨，我正在尝试设计我在网上找到的标签样本。以下是示例：

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

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

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

如何修复此问题？

这是因为您正在将

溢出：隐藏添加到标题和
你还没有清除浮标
以下是解决方案
清除：两个
这里是clear的定义
基于浮动的布局的一个常见问题是，浮动的容器不希望向上伸展以容纳浮动。如果您想在所有浮动周围添加边框，您必须命令浏览器以某种方式将容器一直向上拉伸
这是您的解决方案和快速解决方案
21世纪风格的“清理”
ul:after {
    clear: both !important;
    content: ".";
    display: block;
    float: none;
    font-size: 0;
}

这是小提琴
旧的解决方案
HTML
拨弄
我刚刚展示了一种快速清理技术，还有很多其他技术
你可以看到更多的方法
希望它能帮助您：）非常感谢，但问题是所有内容的顶部边框都是通过这种方式删除的，我只想删除与所选选项卡冲突的部分
ul:after {
    clear: both !important;
    content: ".";
    display: block;
    float: none;
    font-size: 0;
}

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

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