Nav bar Grenze Problem mit CSS

Question

In meinem Fall habe ich eine Nav-Leiste (zwei Tabs) mit grünem Rand. Darunter befindet sich ein Container mit grünem Rand. Für aktiven Tabulatorrand sollte der untere Bereich weiß und ein weiterer Tab grün sein. Also änderte ich border-bottom: 1px solid #fff für die aktive Registerkarte allein. Dieser Fall funktioniert gut ist ein großes und mittleres Gerät. Aber im kleinen Gerät wird die grüne Linie immer noch unter der aktiven Registerkarte angezeigt, die der Rand des Containers ist, der unter dem Nav vorhanden ist.

HTML-Code:

.tab-links:after { 
    display:block; 
    clear:both; 
    content:''; 
    } 
.tab-links li { 
    margin:3px; 
    float:left; 
    list-style:none; 
    } 
.tab-links a { 
    background:none repeat scroll 0 0 #dfdfdf; 
    border:1px solid #c3c3c3; 
    color:#484e2a; 
    display:inline-block; 
    font-family:open_sansbold; 
    font-size:11px; 
    min-width:166px; 
    padding:8px 4px; 
    text-decoration:none; 
    transition:all .15s linear 0s; 
    } 
.tab-links a:hover { 
    background:#a7cce5; 
    text-decoration:none; 
    } 
li.active a, li.active a:hover { 
    background: #fff; 
    border:1px solid #dddfb0; 
    border-bottom:1px solid #fff; 
    color:#484e2a; 
    } 
.tab-content { 
    padding:15px; 
    background:#fff; 
    border:1px solid #dddfb0; 
    margin-top:-20px; 
    } 
.tab { 
    display:none; 
    } 
.tab.active { 
    display:block; 
    } 

<div class="tabs"> 
    <ul class="tab-links"> 
     <li class="active"><a href="#tab1">Tab #1</a></li> 
     <li><a href="#tab2">Tab #2</a></li> 
    </ul> 
</div> 

<div class="tab-content"> 
    <div id="tab1" class="tab active"> 
     <p>Test Content 1</p> 
    </div> 

    <div id="tab2" class="tab"> 
     <p>Test Content 2</p> 
    </div> 
</div> 

JS Fiddler Link:

https://jsfiddle.net/ktncf454/

Answer 1

@padamapriya:

Ich habe für Sie einige Änderungen ..:

.tab-links li { 
    margin: 3px; 
    float: left; 
    list-style: none; 
    position: relative; 
    z-index: 1; 
    margin-bottom: 2px; 
} 

.tab-content { 
    padding: 15px; 
    background: #fff; 
    border: 1px solid #dddfb0; 
    margin-top: -20px; 
    position: relative; 
    z-index: 0; 
} 

this helps !!!!

Answer 2

Sie werden die Medien-Abfrage für die diese scenario.Generally was auf verschiedenen Geräten die navbar selbst anpassen geschieht schreiben müssen Beim Schreiben der Medienabfrage können Sie den Rahmen für den Container und für die Registerkarte ändern.

Es ist gut, wenn Sie Ihren Quellcode teilen oder eine JSFiddle erstellen, so dass wir testen und Ihnen die richtige Lösung geben können.