largeur de la page actuelle incohérente

Question

J'ai une classe "en cours" qui met en évidence la page en cours. Et cela fonctionne aussi bien que mettre en évidence la page actuelle. Avec le padding j'ai ajouté la zone en surbrillance couvre l'élément-a et va vers le haut de la page qui est ce que je veux qu'il fasse. Mais chaque zone en surbrillance est la largeur de l'élément a et puisque chaque élément a un nombre différent de caractères à l'intérieur, les largeurs sont incohérentes. Pour corriger cela, j'ai donné un display: block à l'élément-a. Cette correction a donné une largeur cohérente, mais maintenant la zone en surbrillance descend vers la page plutôt que vers le haut de la page comme je le voulais.

Comment puis-je obtenir une largeur uniforme de la zone en surbrillance pour remonter vers le haut de la page?

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

je changerais la façon dont vous vous construisez nav. Au lieu d'utiliser un flotteur, utilisez un bloc inline sur le LI. En plus de cela, vous pouvez utiliser vertical-align: middle; pour aligner les éléments du milieu ou utiliser le haut/bas. également votre conteneur de navigation ne correspond pas à la taille de la 5 Li que vous utilisez.

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