Einfache CSS Tabs - muß Grenze auf aktiven Reiter brechen

Question

ich einen sehr einfachen Registerkarte Stil erstellen möge, die wie folgt aussieht:

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

Also im Grunde ist es eine horizontale Grenze auf dem Begrenzungsrahmen, der für die bricht aktive Registerkarte. Ich verwende eine Grundliste mit dem folgenden CSS, aber der äußere Rahmen erscheint immer über den einzelnen Tabs. Ich habe auch verschiedene Positionierung und Z-Index vergeblich ausprobiert.

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; 
} 

Answer 1

Versuchen Sie this solution von Eric Meyer.

Inhalt unten von der Website kopiert, um sicherzustellen, dass die Antwort immer noch gültig ist, wenn die Website schließt, ändert oder bricht.

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; 
} 

über den Code Einige Listen innerhalb der Listamatic Website geändert werden musste, so dass sie auf Listamatic die einfache Liste Modell funktionieren könnte. Verwenden Sie im Zweifelsfall zuerst die externe Ressource, oder vergleichen Sie beide Modelle, um zu sehen, welche Ihren Anforderungen entspricht.

Answer 2

Ändern Sie Ihre vorhandenen Code so wenig wie möglich - versuchen display: inline-block für die li Tags, mit der Grenze auf einem .menu Behälter div:

.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 verwendet, um darzustellen (hinzugefügt div unten Mischung zu zeigen, von aktiven Reitern in div Farbe):

<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"> 

Answer 3

.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>