CSS浮动问题 位置偏移了?？

css代码如下:

.nav{ width: 1000px; height: 40px; background: url("../images/nav_bg.jpg") repeat-x; margin: 0 auto; } .nav .nav_left{ float: left; }.nav_left li{ list-style-type: none; float: left; width: 100px; line-height: 40px; text-align: center; }.nav_left a{ text-decoration: none; color: white; font-size: 16px; font-family: 微软雅黑; }.nav .nav_right{ float: right; }

html代码如下:

<div class="nav"> <div class="nav_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_right"> <input type="text"> </div> </div>

效果:

li的flot设置成了left
效果不应该是靠左么 为什么会出现在灰色条的中间呢?
求解