<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8" />
<title>标准水平导航</title>
<style>
.nav, .item {
margin: 0; padding: 0;
text-align: center;
}
nav { /* 为导航定位，非必需 */
position: absolute;
margin-top: 100px;
}
nav h1 { /* 导航标题，非必需 */
font-size: 20px; font-family: "Microsoft YaHei", "Arial"; font-weight: normal;
line-height: 25px;
margin: 10px 20px;
}
.nav { /* 消除li之间的补白，非必需 */
font-size: 0;
}
.item {
display: inline-block;
list-style: none;
}
.item a {
display: block;
line-height: 25px; /* 决定导航项目高度 */
padding: 0 20px; /* 决定导航项目宽度 */
font-size: 20px; font-family: "Microsoft YaHei", "Arial";
color: black;
text-decoration: none;
outline: none;
cursor: pointer;
}
</style>
</head>
<body>
<nav>
<h1>Seven Deadly Sins</h1> <!-- 标题，非必需 -->
<ul class="nav">
<li class="item"><a href = "" class = "item1">Greed</a></li>
<li class="item"><a href = "" class = "item2">Lust</a></li>
<li class="item"><a href = "" class = "item3">Gluttony</a></li>
<li class="item"><a href = "" class = "item4">Envy</a></li>
<li class="item"><a href = "" class = "item5">Sloth</a></li>
<li class="item"><a href = "" class = "item6">Pride</a></li>
<li class="item"><a href = "" class = "item7">Wrath</a></li>
</ul>
</nav>
</body>
</html>
原文：http://my.oschina.net/hiYoHoo/blog/420367