CSS导航条

之前一直用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; //浮动并排