Question

我正在制作一个有趣的网站，我放入导航栏。唯一的问题是导航栏不是垂直居中的，而是被链接向下推，在徽标和导航栏之间留下不需要的空白区域。链接也太高导致它们（当悬停时）不保留在导航区域内。有没有解决这个问题？代码如下：

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

提前谢谢！

Answer 1

向#nav和#nav ul添加定位，如下所示;并且您将获得结果like this

#nav {
    width:1020px;
    height:50px;
    background-color:#EBB035;
    position: absolute;
}
#nav ul {
    display:block;
    position: relative;
    list-style-type:none;
    margin-top: 1em;
}

将导航栏与css垂直对齐

1 个答案: