设置横向导航栏

1.基本结构

<div class="nav">

         <ul>

               <li>首页</li>

                <li>关于我们</li>

                <li>商务合作</li>

         </ul>

</div>

---

2. CSS样式

.nav{

         height:40px;/*设置导航栏高度*/

         overflow:hidden;/*将超出导航栏的内容隐藏*/

         background-color:#900;/*背景色*/

         color:#ffffff;/*字体颜色*/

}

       .nav ul{

        list-style:none;/*清除列表的默认样式（清除圆点）*/

}

        .nav ul li{

        float:left;/*全部向左浮动，横向排列*/

         line-height:40px;/*设置行高和盒子高度相同,使文字垂直居中*/

        margin-left:20px;/*左侧外边距，使每个li之间有间隙*/

}