Nav bar border issue using css

Question

В моем случае у меня есть панель навигации (две вкладки) с зеленой рамкой. Ниже находится контейнер с зеленой границей. Для активной вкладки граница внизу должна быть белой, а другая вкладка должна быть зеленой. Поэтому я изменил border-bottom: 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, что происходит на разных устройствах Navbar приспособиться автоматически. При написании медиа-запроса вы можете изменить границу для контейнера и вкладки.

Это будет хорошо, если вы поделитесь своим исходным кодом или создадите jsfiddle, чтобы мы могли протестировать и дать вам правильное решение.