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

我使用div创建选项卡视图。当其中一个选项卡处于活动状态时，我想要隐藏外部div底部边框，以便我看到该选项卡被选中。合并外div与内部div和内部div边框活动

但现在我看到外部div底部边框，这是不是很像在图像中。 enter image description here

所需的输出：

enter image description here

我的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外div的边框底部，使我看到相应的选项卡是真的看起来选择了。？

来源

2014-12-02 Alagesan Palani

你究竟想要做什么？你能显示所需输出的图像吗？ – Hiral 2014-12-02 07:03:15

预期输出的PFA图像。 – 2014-12-02 07:06:05

以下是在当前的CSS的变化来实现这一目标：

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

从.clsTabContainer删除overflow:hidden。

See DEMO here.

来源

2014-12-02 07:31:47 Hiral

他身高100％吗？ – 2014-12-02 07:34:44

在这种情况下，计算100％ - 顶部和底部填充 – Hiral 2014-12-02 08:02:31

它不适合我，你能告诉我如何计算填充？ – 2014-12-02 08:05:31

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

回答

相关问题