本篇文章给大家带来的内容是关于css实现横向导航和竖向导航栏的方法(代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
一、竖向导航
ul{
list-style-type:none;
margin:0;
padding:0;
}
a{
display:block;
background-color:green;
color:white;
width:80px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active{
background-color:#98bf21;
}
首页学习中心考试中心考试动态
运行结果：
二、横向导航：
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
float:left;
}
a{
display:block;
background-color:pink;
color:white;
width:80px;
text-align:center;
padding:4px 0px;
text-decoration:none;
}
a:hover,a:active{
background-color:gray;
}
首页学习中心考试中心考试动态
运行结果：
注意：
1、a标签的display=block让链接是一个可点击的区域而不是文本。
2、a链接指定为block块元素之后可以设置宽度，让每个链接的宽度看起来一样。
相关推荐：
