合并外部div与内部div和内部div边界活动

Question

我使用div创建标签视图。当其中一个选项卡处于活动状态时，我想隐藏外部div底部边框，以便我看到选项卡已被选中。

但是现在我看到外部div底部边框，这在图像中并不是很好。

期望的输出：

我的div被定为：

<div class='clsTabContainer'>
    <div class='clsCurrentTab'>Dashboard</div>
    <div class='clsTab'>Leads</div>
    <div class='clsTab'>Internet</div>
    <div class='clsTab'>Tasks</div>
</div>

.clsTabContainer {
    BACKGROUND-COLOR: #FFFFFF;
    PADDING-LEFT: 0px;
    WIDTH: 100%;
    PADDING-RIGHT: 0px;
    WHITE-SPACE: nowrap;
    HEIGHT: 35px;
    OVERFLOW: hidden;
    PADDING-TOP: 3px;  
    border-bottom: #D0D0D0 1px solid;
}

.clsTab {
    OVERFLOW-X: visible;
    OVERFLOW-Y: hidden;
    BACKGROUND-COLOR: #F0F0F0;
    DISPLAY: inline-block;
    WHITE-SPACE: nowrap;
    HEIGHT: 100%;
    FONT-SIZE: 10pt;
    VERTICAL-ALIGN: middle;
    CURSOR: pointer;    
    padding: 5px 10px 10px 10px;
    margin-left: -1px;
    border-left: #D0D0D0 1px solid;
    border-right: #D0D0D0 1px solid;
    border-top: #D0D0D0 1px solid;
}

.clsCurrentTab {
    OVERFLOW-X: visible;
    OVERFLOW-Y: hidden;
    BACKGROUND-COLOR: #FFFFFF;
    DISPLAY: inline-block;
    WHITE-SPACE: nowrap;
    HEIGHT: 100%;
    FONT-SIZE: 10pt;
    VERTICAL-ALIGN: middle;
    CURSOR: pointer;    
    padding: 5px 10px 10px 10px;
    margin-left: -1px;
    border-left: #D0D0D0 1px solid;
    border-right: #D0D0D0 1px solid;
    border-top: #82C600 1px solid;
    color: #82C600;
}

如何避免所选div上的外部divs边框底部，这样我才能看到相应的标签真的看起来已经选中了。？

Answer 1

以下是当前css的变化，以实现这一目标：

.clsTab {
    height:19px;
}
.clsCurrentTab {
    height:20px;
}
.clsTab,.clsCurrentTab {
    vertical-align: top;
}

从overflow:hidden删除.clsTabContainer。

See DEMO here.