국경 맨 아래 문제 (호버 위에서 아래로 확장)

Question

나는 항법 작업을하고 있는데 아래쪽으로 확장하는 대신 아래쪽 경계선을 위쪽으로 늘리는 방법을 생각할 수 없습니다. 내 머리글을 몇 픽셀) 높이를 설정하여 머리글을 고칠 수는 있지만 테두리는 여전히 위쪽으로가 아니라 아래쪽으로 확장됩니다.

CSS의 :

header { 
    margin: 0; 
    padding: 0; 
    left: 0; 
    top: 0; 
    width: 100%; 
    position: absolute; 
    background: #000000; 
} 
ul { 
    list-style-type: none; 
    display: block; 
    margin: 0 0 0 20px; 
    padding: 0; 
} 
ul li { 
    display: inline-block; 
    padding: 0; 
} 
ul li a{ 
    display: block; 
    border-bottom: 1px solid #fff; 
    font-size: 19px; 
} 
ul li a:hover{ 
    border-bottom: 2px solid #fff; 
    background: #333; 
    font-size: 19px; 
} 

html로 :

<header> 
    <ul id="nav"> 
    <li><a href="">link 1</a></li> 
    <li><a href="">link 2</a></li> 
    <li><a href="">link 3</a></li> 
    </ul> 
</header> 

JSFiddle :

http://jsfiddle.net/Artsen/EZWvF/

Answer 1

그래서 당신은 오른쪽 상단에 국경 바닥을 높이려는 ?

저는 실제로 최근에 웹 사이트에서이 작업을 수행했습니다. 특정 패딩 및 테두리 속성을 설정하는 것 외에는 다른 방법이 없습니다. http://jsfiddle.net/EZWvF/2/이

원리는 (더 눈에 보이는 테스트 케이스를 만들기 위해 몇 가지 속성을 변경) :

나는 여기 jsfiddle을 편집 스왑의 픽셀 값 패딩 바닥 및 호버에 국경 바닥.

ul li a { 
border-bottom: 1px solid white; 
padding-bottom: 5px; 
} 
ul li a:hover { 
border-bottom: 5px solid white; 
padding-bottom: 1px; 
} 

참고 : 당신이 CSS-전환을 추가하지 않는 경우에만 작동합니다 이러한 솔루션의 핵심 라인이다. 바이올린에 넣은 CSS 전환을 인용 부호로 묶지 않으면 div가 여전히 맨 아래로 확장된다는 것을 알 수 있습니다. 당신이 ss- 전이를 원한다면 당신은 국경을 모방하기 위해 별도의 div를 li에 추가해야 할 것입니다.

Answer 2

Tyblitz가 여분의 패딩 값을 다음과 같이 사용할 것을 제안했습니다. 호버링은 전환이 필요하지 않을 때 큰 효과를 발휘합니다.

전환이 필요하고 추가 div를 사용하지 않으려면 세로 높이를 제어하기 위해 줄 높이/높이 접근 방식을 사용하면됩니다.

그래서 대신이 일을 :

.nav-element a { 
    color: gray; 
    padding: 25px 15px; 
    transition: all ease-in-out 0.2s; 
    display: block; 
    text-decoration: none; 
} 

이 작업을 수행 :

.nav-element a { 
    color: gray; 
    padding: 0 15px; 
    line-height: 70px; 
    height: 70px; 
    transition: all ease-in-out 0.2s; 
    display: block; 
    text-decoration: none; 
} 

이 here 을 작업하고 (행 높이/높이를 사용하여) 작업을 수행하지 않는 경우의 예를 참조