在线运行代码 - 代码学院 www.codexy.cn

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>代码学院(codexy.cn)</title> 
<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
	padding-top:6px;
	padding-bottom:6px;
}
li
{
	display:inline;
}
a:link,a:visited
{
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	text-align:center;
	padding:6px;
	text-decoration:none;
	text-transform:uppercase;
}
a:hover,a:active
{
	background-color:#7A991A;
}

</style>
</head>

<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>

<p><b>注意:</b>如果您只为 a 元素设置内边距（而不设置 ul 元素），那么链接会出现在 ul 元素之外。所以，我们为 ul 元素添加了 top 和 bottom 内边距。 </p>
</body>
</html>
源代码

动行结果
