현재 페이지 너비가 일치하지 않습니다.

Question

현재 페이지를 강조 표시하는 "현재"클래스가 있습니다. 그리고 그것은 현재 페이지를 강조하는 한까지 작동합니다. 패딩을 사용하여 강조 표시된 영역에 a 요소를 추가하고 페이지 맨 위로 이동하여 원하는대로 수행합니다. 그러나 각 강조 표시된 영역은 a 요소의 너비이며 각 a 요소는 다른 수의 문자를 가지고 있기 때문에 너비가 일치하지 않습니다.

이 문제를 해결하기 위해 a 요소에 display: block을 부여했습니다. 이 보정은 일관된 너비를 제공하지만 강조 표시된 부분은 내가 원하는대로 페이지 위쪽으로 향하는 것과 반대로 페이지쪽으로 내려갑니다.

강조 표시된 영역의 일관된 너비를 페이지 맨 위로 올라가려면 어떻게해야합니까?

nav { 
 
    margin: 100px auto; 
 
} 
 

 
.top-nav { 
 
    width: 785px; 
 
    color: dimgrey; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
} 
 

 
.top-nav li { 
 
    width: 150px; 
 
    float: left; 
 
    margin: 0 3px; 
 
} 
 

 
.top-nav a { 
 
    color: dimgrey; 
 
    width: 150px; 
 
} 
 

 
.current { 
 
    padding: 150px 0px 5px 0px; 
 
    background-color: #fab938; 
 
    color: white; 
 
} 
 

 
span.fa-bath { 
 
    font-size: 50px; 
 
    margin-top: -45px; 
 
    margin-bottom: 10px; 
 
    border-radius: 100%; 
 
    padding: 20px; 
 
    background-color: #fab938; 
 
}

<nav> 
 
    <ul class="top-nav"> 
 
    <li><a href="index.html">Quem Somos</a></li> 
 
    <li><a href="o-que-fazemos.html">O Que Fazemos?</a></li> 
 
    <li><span class="fa fa-bath"></span></li> 
 
    <li><a href="donations.html">Donations</a></li> 
 
    <li><a href="contact.html" class="current">Contact</a></li> 
 
    </ul> 
 
</nav>

Answer 1

난 당신이 탐색 빌드 방식을 변경합니다. float를 사용하는 대신 LI에서 인라인 블록을 사용하십시오. 그 다음으로 vertical-align : middle;를 사용할 수 있습니다. 가운데에서 항목을 정렬하거나 위/아래를 사용하십시오. 네비게이션 컨테이너가 사용중인 5 리의 크기에 맞지 않습니다.

https://jsfiddle.net/wyrscn48/1/

nav { 
    margin: 100px auto; } 

.top-nav { 
    width: 935px; 
    color: dimgrey; 
    text-align: center; 
    margin: 0 auto; 

    } 

.top-nav li { 
    width: 150px; 
    margin: 0 3px; 
    display: inline-block; 
    vertical-align: top; 
    } 

.top-nav a { 
    color: dimgrey; 
    width: 150px; } 

.current { 
    background-color: #fab938; 
    color: white; } 

span.fa-bath { 
    font-size: 50px; 
    margin-bottom: 10px; 
    border-radius: 100%; 
    padding: 20px; 
    background-color: #fab938; 
    }