cssを使用したナビゲーションバーの境界問題

Question

私の場合、緑の枠線を持つナビゲーションバー（2つのタブ）があります。この下には、緑色の境界線を持つコンテナがあります。アクティブなタブのborder-bottomは白で、もう1つのタブは緑でなければなりません。だから私は境界線の底部を変更しました：1px solid #fffだけで、アクティブなタブだけです。この場合は、大規模で中規模のデバイスが正常に動作しています。しかし、小さいデバイスでは、緑色の線は、ナビの下にあるコンテナの境界線であるアクティブなタブの下に表示されます。

HTMLコード：

.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フィドラーリンク：

https://jsfiddle.net/ktncf454/

Answer 1

@padamapriya：

私はあなたのためにいくつかの変更をしましたが..：

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

は、この情報がお役に立てば幸いです!!!!

Answer 2

あなたは、異なるデバイス上で何が起こるかscenario.Generallyこのナビゲーションバーは、自分自身を調整するためのメディアクエリを記述する必要があります自動的に。メディアクエリを作成すると、コンテナとタブの境界を変更することができます。

ソースコードを共有したり、jsfiddleを作成してテストしたり、適切な解決策を提供することができれば、これはうまくいきます。