列表和浮动做导航条

效果如图所示：实现代码如下：

<style>
        * {    margin:0;  padding:0;  }
        .nav {  height: 60px; background-color: lightgray;   }
        .nav ul {margin: auto;width: 840px;height: 60px; }
        .nav ul li {  float: left;  list-style:none ;  width: 120px;    }
        .nav ul li a{  display: inline-block;  width: 120px;height: 60px;   text-decoration: none; 

                            text-align: center;  line-height: 60px;  color: black; font-size: 18px; font-family: "黑体";      }
        .nav ul li a:hover {  backgr ound-color: gray;     }
    </style>   //样式代码

//列表代码

<div class="nav">
           <ul>
                <li><a href="">首页</a></li>
                <li><a href="">考生简介</a></li>
                <li><a href="">考生须知</a></li>
                <li><a href="">考试时间</a></li>
                <li><a href="">报名流程</a></li>
                <li><a href="">常见问题</a></li>
                <li><a href="">特别提示</a></li>
            </ul>    
        </div>