之前一直用div嵌套，感觉有点绕了，于是换成li来做导航。 html部分：
<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> <li><a href="#">青少年</a></li> <li><a href="#">绿茵梦想</a></li> <li><a href="#">商务专区</a></li> <li><a href="#">关于足协</a></li> </ul> </div>css部分：
.nav { width: 100%; height: 35px; background-color: #1c7430; border-bottom: #34ce57 5px solid; } ul { width: 1000px; margin: auto; } .nav li { display: inline-block; float: left; width: 9%; text-align: center; } li a{ color: white; }重点是 display: inline-block; //将li行元素转换为行里块元素 float: left; //浮动并排
