<div class="nav"> <div class="nav_left"></div> <div class="nav_mid"> <div class="nav_mid_left"> <ul> <li><a href="#">首页</a></li> <li><a href="list.html">关于慕课</a></li> <li><a href="list.html">新闻动态</a></li> <li><a href="list.html">课程中心</a></li> <li><a href="list.html">在线课程</a></li> <li><a href="list.html">人才招聘</a></li> </ul> </div> <div class="nav_mid_right"> <form action="" method="post"> <input type="text" class="search_text" /> </form> </div> </div><!-- nav_mid结束 --> <div class="nav_right"></div> </div><!-- nav结束 -->
CSS如下: .nav{ height: 40px } .nav_left{ width:10px; background: url(images/nav_left.jpg) no-repeat; } .nav_mid{ width: 980px; background: url(images/nav_bg.jpg) repeat-x; line-height: 40px; } .nav_right{ width: 10px; background: url(images/nav_right.jpg) no-repeat; } .nav_left, .nav_mid, .nav_right{ height:40px; float: left; }/*各类有相同代码,可这样连写*/ .nav_mid_left,.nav_mid_right{ float: left; } .nav_mid_left{ width: 680px; } .nav_mid_right{ width: 300px; } .nav_mid_left li{ float: left; list-style:none; width: 100px; text-align:center; line-height: 40px; } .nav_mid_left a:link,.nav_mid_left a:visited{ text-decoration: none; color: #FFF; font-size:16px; font-family: "微软雅黑" }/*超链接的初始状态和访问状态*/ .nav_mid_left a:hover,.nav_mid_left a:active{ text-decoration: none; color: #FF0; font-size:16px; font-family: "微软雅黑" }/*鼠标经过时和点击时的状态*/ .search_text{ width: 190px; height: 25px; float: left; margin-top: 5px; background: url(images/search.jpg) no-repeat right center; background-color: #FFF; padding-right: 25px;/*字体不会与搜索图标重复*/ border:1px solid #FFF; }
.nav{ height: 40px; clear:both; }
意思是,你要这三个div在一行需要他们是同级的关系
你这nav_left和nav_mid是兄弟,nav_mid是nav_right他老爸,这怎么在一行?