ul当做div标签的使用，制作一个导航栏
方法：将 ul的自带的margin和 padding list格式进行清除
<!DOCYTYPE html>
<html lang="en">
<html>
<HEAD>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
.menu{
width: 694px;
height: 50px;
/* 有自带 margin和 padding list格式进行清除*/
list-style: none;
margin: 50px auto 0;
padding: 0;
}
.menu li{
width: 98px;
height: 48px;
border:1px solid gold;
text-align: center;
/* 浮动合为一行*/
float: left;
margin-left: -1px;
}
/* 增加a标签的识别范围*/
.menu li a{
display: block;
width: 98px;
height: 48px;
line-height: 48px;
text-decoration: none;
}
/* 悬停颜色*/
.menu li a:hover{
background-color: gold;
color: #fff;
}
</style>
</HEAD>
<BODY>
<ul class="menu">
<li><a href="#">wwww</a></li>
<li><a href="#">wwww</a></li>
<li><a href="#">wwww</a></li>
<li><a href="#">wwww</a></li>
<li><a href="#">wwww</a></li>
<li><a href="#">wwww</a></li>
<li><a href="#">wwww</a></li>
</ul>
</BODY>
</html>
效果图
原文：https://www.cnblogs.com/lzq70112/p/13139893.html