簡單的CSS標籤 - 需要打破邊界活動標籤

上我希望創建一個看起來像這是一個非常簡單的製表風格：簡單的CSS標籤 - 需要打破邊界活動標籤

_____ _____ _____ 
_|_____|_|  |_|_____|______________

所以基本上就打破了邊框的水平邊界活動標籤。我正在使用以下CSS的基本列表，但外部邊框始終顯示在各個選項卡上。我嘗試過各種定位和z-index也無濟於事。

ul.tabHolder { 
    overflow: hidden; 
    clear: both; 
    margin: 1em 0; 
    padding: 0; 
    border-bottom: 1px solid #666; 
} 
ul.tabHolder li { 
    list-style: none; 
    float: left; 
    margin: 0 3px -1px; /* -1 margin to move tab down 1px */ 
    padding: 3px 8px; 
    background-color: #444; 
    border: 1px solid #666; 
    font-size: 15px; 
} 
ul.tabHolder li.active { 
    background-color: #944; 
    border-bottom: 1px solid #944; 
}

來源

2010-05-10 DisgruntledGoat

嘗試this solution通過Eric Meyer。

從網站複製下面的內容，以確保如果網站關閉，更改或中斷，答案仍然有效。

HTML

<div id="navcontainer"> 
    <ul id="navlist"> 
     <li id="active"><a href="#" id="current">Item one</a></li> 
     <li><a href="#">Item two</a></li> 
     <li><a href="#">Item three</a></li> 
     <li><a href="#">Item four</a></li> 
     <li><a href="#">Item five</a></li> 
    </ul> 
</div>

CSS

#navlist 
{ 
    padding: 3px 0; 
    margin-left: 0; 
    border-bottom: 1px solid #778; 
    font: bold 12px Verdana, sans-serif; 
} 

#navlist li 
{ 
    list-style: none; 
    margin: 0; 
    display: inline; 
} 

#navlist li a 
{ 
    padding: 3px 0.5em; 
    margin-left: 3px; 
    border: 1px solid #778; 
    border-bottom: none; 
    background: #DDE; 
    text-decoration: none; 
} 

#navlist li a:link { color: #448; } 
#navlist li a:visited { color: #667; } 

#navlist li a:hover 
{ 
    color: #000; 
    background: #AAE; 
    border-color: #227; 
} 

#navlist li a#current 
{ 
    background: white; 
    border-bottom: 1px solid white; 
}

有關代碼的Listamatic網站內的某些列表不得不進行修改，以便他們可以在Listamatic的簡單列表模式工作。如果有疑問，請首先使用外部資源，或者至少比較兩種型號以查看哪種型號適合您的需求。

來源

2010-05-10 13:43:25 ghoppe

最後，我不必更改我的代碼很多，但這個頁面幫助我解決了這個問題。 – DisgruntledGoat 2010-05-11 10:53:28

更改現有的代碼儘可能少 - 在.menu容器div嘗試display: inline-block爲li標籤，與邊框：用來說明

.menu { 
    border-bottom: 1px solid #666; 
} 
ul.tabHolder { 
    overflow: hidden; 
    margin: 1em 0 -2px; 
    padding: 0; 
} 
ul.tabHolder li { 
    list-style: none; 
    display: inline-block; 
    margin: 0 3px; 
    padding: 3px 8px 0; 
    background-color: #444; 
    border: 1px solid #666; 
    font-size: 15px; 
} 
ul.tabHolder li.active { 
    background-color: #944; 
    border-bottom-color: #944; 
}

HTML（在底部添加格顯示混合

<div class="menu"> 
    <ul class="tabHolder"> 
     <li>Menu 1</li> 
     <li class="active">Menu 2</li> 
     <li>Menu 3</li> 
    </ul> 
</div> 
<div style="background-color: #944; height: 1em">

來源

2010-05-10 13:55:04

...或者Eric Meyer的解決方案，正如我在寫這篇文章時由ghoppe發佈的那樣:-) – 2010-05-10 14:03:04

如果您將'ul.tabHolder'上的'margin-bottom'設置爲'-1px'而不是'-2px'， - http://jsfiddle.net/mrPAE/ – Sam 2010-05-10 14:05:01

取決於瀏覽器 - 在FF 3.6.3（OS X）中1px不會隱藏下邊框。邁爾的解決方案似乎最乾淨。 – 2010-05-10 14:15:24

.tab { 
 
    display: inline-block; 
 
    background-color: #aaa; 
 
    padding: 4px; 
 
    border: 1px solid #888; 
 
    border-bottom: none; 
 
    
 
    position: relative; 
 
    bottom:-1px; 
 
    z-index: -1; 
 
} 
 

 
.tab-body { 
 
    position: relative; 
 
    height: 100px; 
 
    width: 200px; 
 
    padding: 4px; 
 
    background-color: #ccc; 
 
    border: 1px solid #888; 
 
    z-index: 1; 
 
} 
 

 
.tab.active { 
 
    background-color: #ccc; 
 
    z-index: 2; 
 
}

<div class="tab tab1">Tab 1</div> 
 
<div class="tab tab2 active">Tab 2</div> 
 
<div class="tab tab3">Tab 3</div> 
 

 
<div class="tab-body">Tab Body</div>

：活動選項卡到的div顏色）的

來源

2016-06-16 06:41:49 Ken

簡單的CSS標籤 - 需要打破邊界活動標籤

回答

相關問題