如何制作谷歌导航栏

Question

所以我尝试了很多技巧，但没有一个有效。我是HTML的新手，只是学习大学并尝试制作一个类似google的导航栏。我的问题是将正确的链接集中在一起。我使用vertical-align尝试了position: relative/absolute，top:50%，但它仍无效。有什么建议吗？

当前代码

CSS

nav{border-bottom:2px solid black; height:60px;}
        #right{float:right;}
        #left{float:left;}

HTML

<nav>
    <div id="left">Test (Will be an image in the future)</div>
    <div id="right">Test</div>
    </nav>

Answer 1

一种方法是将line-height:60px添加到nav的规则中：

nav {
    border-bottom:2px solid black;
    height:60px;
    line-height:60px;
}

<强> jsFiddle example

Answer 2

导航栏通常由链接列表组成。这些在线教程很多，你可以找到一个简单的例子here。

另请注意，nav是HTML5元素，可能无法在所有浏览器中正确呈现。