如何重叠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>