css - 如何在 CSS 中重叠边框以创建选项卡？

Question

我正在尝试创建以下选项卡:

并且在弄清楚如何使 active 选项卡与列表中的顺序重叠时遇到问题。这是 HTML:

<ul>
 <li class="active">LATEST</li>
 <li>VOTES</li>
<ul>

Answer 1

没有div:

演示:http://jsfiddle.net/GCu2D/790/

CSS:

html, body {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    background-color:#f0f0f0
}
ul {
    margin:0px;
    padding:0;
    position:relative;
}
ul:before {
    left: 0;
    right: 0;
    bottom: 0px;
    height: 0;
    border-bottom: 1px solid #777;
    content:"";
    top: auto;
    display: block;
    position: absolute;
}
ul:after {
    clear:both;
    display:block;
    content:""
}
ul li {
    display:block;
    float:left;
    padding:5px 10px;
    border:1px solid #777;
    margin-right:-1px;
    position:relative;
}
ul li.active {
    border-bottom:1px solid #f0f0f0
}

HTML:

<ul>
    <li class="active">LATEST</li>
    <li>VOTES</li>
</ul>

有额外的div

你可以这样试试:http://jsfiddle.net/GCu2D/787/

CSS:

html, body {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    background-color:#f0f0f0
}
ul {
    margin:0px;
    padding:0;
}
ul:after {
    clear:both;
    display:block;
    content:""
}
ul li {
    display:block;
    float:left;
    padding:5px 10px;
    border:1px solid #777;
    margin-right:-1px;
    position:relative;
}
div {
    border:1px solid #777;
    margin-top:-1px;
}
ul li.active {
    border-bottom:1px solid #f0f0f0
}

HTML:

<ul>
    <li class="active">LATEST</li>
    <li>VOTES</li>
</ul>
<div>Content</div>