私は楽しみのためにウェブサイトを作っていて、ナビゲーションバーを入れています。唯一の問題は、ナビゲーション バーが垂直方向の中央に配置されておらず、リンクによって 1 行下に押し下げられており、ロゴとナビゲーション バーの間に不要な空白が残っていることです。また、リンクが高すぎて (ホバリングしたときに) ナビゲーション領域内にとどまりません。これに対する修正はありますか?以下のコード:
HTML:
<nav id="nav">
<ul>
<li><a href="http://www.google.com">hello</a></li>
<li><a href="http://www.google.com">hello</a></li>
</ul>
</nav>
CSS:
.container{
width:1020px;
margin:auto;
position:relative;
}
#nav{
width:1020px;
height:50px;
background-color:#EBB035;
}
#nav ul{
display:block;
list-style-type:none;
}
#nav li{
display:inline;
}
#nav a:link{
color: #000000;
font-weight: 700;
padding: 8px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
#nav a:visited{
color: #000000;
font-weight: 700;
padding: 8px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
#nav a:hover{
background-color:#FFCC00;
color: #000000;
font-weight: 700;
padding: 8px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
前もって感謝します!