<div class="nav clearfix"> <div class="nav_left"> </div> <div class="nav_middle"> <div class="nav_middle_left"> <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> </ul> </div> <div class="nav_middle_right clearfix"> <form action="" method="post"> <input type="text" class="search_text"/> </form> </div> </div> <div class="nav_right"> </div> </div>
.nav{ height: 40px; } .nav_left{ width: 10px; background: url(../images/nav_left.jpg) no-repeat; float: left; height: 40px; } .nav_middle{ width: 980px; background: url(../images/nav_bg.jpg) repeat-x; float: left; } .nav_right{ width: 10px; background: url(../images/nav_right.jpg) no-repeat; float: right; height: 40px; } .nav_middle_left{ width: 680px; } .nav_middle_right{ width: 300px; } .nav_middle_left li{ float: left; list-style-type: none; width: 100px; text-align: center; line-height: 40px; } .nav_middle_left li:after{ clear: both; } .nav_middle_left a:link,.nav_middle_left a:visited{ text-decoration: none; color: #FFF; font-size: 16px; font-family: "微软雅黑"; } .nav_middle_left a:hover,.nav_middle_left a:active{ text-decoration: none; color: #FF0; font-size: 16px; font-family: "微软雅黑"; } .search_text{ width: 190px; height: 25px; margin-top: 5px; float: left; }
我检查过nav_middle宽度为980px,nav_middle_left为680px,nav_middle_right为300px;
其中的搜索框才190px,然后又将.nav_middle_left li:after{clear:both;}了一下,还是没有改变。。。
你可能弄错原因了,错误原因是nav_middle_left这个div,和nav_middle_right这个div并没有设置浮动,他们是块级元素,必然会换行,你是在搜索框的样式上设置的左浮动,他的意思是搜索框在nav_middle_right这个块中左浮动,并不是让你的这个快去浮动贴着nav_middle_left这个块
找到解决办法了,将<div class="nav_middle_right clearfix">中clearfix去掉,但是原理我还没有太明白的