CSS를 사용하여 탐색 바 경계 문제

내 경우에는 녹색 테두리가있는 탐색 모음 (두 개의 탭)이 있습니다. 아래에는 녹색 테두리가있는 컨테이너가 있습니다. 활성 탭 테두리 - 하단은 흰색이어야하고 다른 탭은 녹색이어야합니다. 그래서 경계 탭을 변경했습니다 : 활성 탭 1 개당 1 픽셀의 단색 #fff. 이 사건은 크고 중간 장치가 잘 작동합니다. 하지만 작은 장치에서는 녹색 선이 여전히 활성 탭 아래에 표시됩니다.이 탭은 탐색 아래에있는 컨테이너의 경계입니다.CSS를 사용하여 탐색 바 경계 문제

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/

출처

2016-07-04 prisel

코드를 공유하여 문제를 확인하십시오. –

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

희망 !!!!

출처

2016-07-04 06:56:11

당신은 다른 장치에서 발생하는 scenario.Generally은이 네비게이션 바에는 자신을 조정하기위한 미디어 쿼리를 작성해야합니다 자동으로. 미디어 쿼리를 작성하면 컨테이너 및 탭의 테두리를 변경할 수 있습니다.

소스 코드를 공유하거나 jsfiddle을 작성하면 테스트를 거쳐 적절한 해결책을 얻을 수 있습니다.

출처

2016-07-04 05:37:10

안녕 Jagtar, 의견을 보내 주셔서 감사합니다. 내 코드를 추가했습니다. 한 번 확인하십시오. – prisel

@Padmapriya 이것은 [jsfiddle] (https://jsfiddle.net/ztv9vpbs/) 업데이트입니다. 미디어 쿼리를 작성했으며 borderbottom CSS 속성을보고 테두리 색을 변경할 수 있습니다. –

CSS를 사용하여 탐색 바 경계 문제

답변

관련 문제