html - 在 html/css 中创建选项卡，以便边框在事件选项卡下方消失

Question

我正在尝试创建标签，其中沿着内容有一个顶部边框，然后事件标签以这样一种方式重叠，即它与内容之间没有边框。

我尝试过使用负边距进行游戏，但它不起作用。我想在不使用 position:absolute 的情况下执行此操作

http://jsfiddle.net/Py8BW/3/ (我使用的是绿色和红色，但它们在最终结果中的颜色相同。)

<div class = "tab">inactive</div>
<div class = "tab tab_active">active</div>

<div class = "content"> 
</div>

.

.tab{
  width:70px  ;
     display:inline-block;
    background:green;
    height:50px;  
    // margin-bottom:-2px; /* makes both tabs look active */
}

.tab_active{
     margin-bottom:-2px; /* does nothing */
}

.content{
    border-top:2px solid black;
    width:200px ;
    background:red;
    height:200px;
}

Answer 1

另一个解决方案是添加 border-bottom在相同的颜色和margin-bottom上课.tab_active .

.tab_active{
    margin-bottom: -2px;
    border-bottom: 2px solid red;
}

.tab {
  width: 70px;
  display: inline-block;
  background: red;
  height: 50px;
  /* margin-bottom: -2px; makes both tabs look active */
}

.tab.active {
  margin-bottom: -2px;
  border-bottom: 2px solid red;
}

.content {
  border-top: 2px solid black;
  width: 200px;
  background: red;
  height: 200px;
}

<div class="tab">inactive</div>
<div class="tab active">active</div>
<div class="content"></div>