合併外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邊框活動

回答

相關問題