테두리 왼쪽과 테두리 상단 함께 문제가

내 선택한 단추 왼쪽 테두리를 추가하려고하지만 뭔가 알아낼 수없는 이상한 일이있을 것 같습니다.테두리 왼쪽과 테두리 상단 함께 문제가

this JSFiddle에서 볼 수 있습니다.

왼쪽의 파란색 테두리가 위에 1px 이상인 것 같습니다. 그것은 내가 바라던대로 완벽하게 사각형에 앉아 있지 않습니다.

HTML :

<div id="sidebarnav"> 
    <br> 
    <a href="blog"><div class="button-selected">Blog</div></a> 
</div>

CSS :

#sidebarnav { 
    width:250px; 
    background-color:#202020; 
    height: 100%; 
    float:left; 
    position:fixed; 
    border-right: 1px solid #bbb; 
} 

.button-selected { 
    text-align:left; 
    width: 236; 
    padding-left: 10px; 
    padding-top: 6px; 
    padding-bottom: 6px; 
    background-color:#161616; 
    color: #fff; 
    border-top: 1px solid #0A0A0A; 
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.04) inset; 
    overflow:auto; 
    cursor: pointer; 
    border-left: 4px solid #3498db; 
}

출처

2014-04-12 Lovelock

이것은 해결책이나 해결 방법이 아니지만 단지 보시는 내용이 구석에있는 두 개의 경계선 회의라는 것을 지적하십시오. 논리적으로, 대각선 심이 소개 될 것이기 때문에 어느 쪽도 겹치지 않도록 경계선이 우선권을 갖지 않습니다. – John

그게 내가 생각할 수있는 유일한 방법입니다. 어쨌든 국경을 제거했습니다. – Lovelock

테두리를 모두 스크랩하지 않고 유용한 해결 방법을 사용하여 답글을 게시했습니다. 조금 더 코드지만 모든 CSS는 HTML 마크 업에 특별히 필요한 것은 없습니다. – John

당신은 테두리와 같은 역할을하는 의사 요소를 추가하여 코너 심 문제를 해결 할 수있다. 다음과 같은 것 :

.button-selected { 
    /* all of your original styling here */ 
    position: relative; /* relative positioning required for position 
          absolute on pseudo element */   
    padding-left: 14px; /* 4px of padding added to compensate for 
          width of pseudo element */ 
} 
.button-selected:after { 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    width: 4px; /* width of desired 'border' effect */ 
    background: #3498db; 
}

Updated example of your jsfiddle here.

출처

2014-04-12 23:11:40 John

테두리 왼쪽과 테두리 상단 함께 문제가

답변

관련 문제