강조 링크

Question

http://jsbin.com/OkaC/1/edit

HTML :

<ul> 
    <li> 
     <a class='active' href='#'>Link</a></li> 
    <li><a href='#'>Link</a></li> 
</ul> 

CSS :

.active { 
    background:grey; 
    border-radius:2px; 
    padding:4px; 
} 

이 임 달성하려고 무엇의 기본적인 예입니다 - 강조 링크 요소 자체보다 큰 효과를 가진 일반 링크의 경우 여기에서는 패딩을 사용하지만 페이지의 시각적 구조의 일관성이 깨졌습니다. 강조 표시된 링크는 일반 링크와 관련하여 이동되었습니다. 내가 생각하고있는
가능한 솔루션 : 모든 링크에

• 추가 패딩.
• JS의 경우 현재 좌표로 절대 위치 지정으로 활성 링크를 전환합니다.

다른 해결책이 있습니까?

Answer 1

또한 링크 주위에 여분의 공간을 제거하는 부정적인 여백을 추가 할 수 있습니다

a { 
    padding: 4px; 
    margin: -4px; 
} 

다른 방법은 패딩 대신 개요를 추가하는 것입니다 : 솔루션에 문제가

a { 
    outline: 4px solid grey; 
} 

Answer 2

이 특정 'ul li a'에 패딩을 추가하고 모든 요소가 아닌 나머지 페이지를 변경해서는 안됩니다.