現在のページ幅が一貫しない

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

私はあなたがNAV構築方法を変更します。 floatを使用する代わりに、LIのインラインブロックを使用します。 次に、vertical-align：middleを使用できます。中間からアイテムを整列させるか、上/下を使用します。 あなたのnavコンテナはあなたが使用している5 Liのサイズに合っていません。

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