制作网站首页导航栏，左中右三部分，全部设置左浮动，总宽度：1000px，宽度：左10px，中980px，右10px，左边部分总是不能跟中右两部分放到一行内

错误图片：

网页部分：

<!-- nav开始 -->

        <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"/>

                    </form>

                </div>

            </div>

            <div class="nav_right"></div>

        </div>

        <!-- nav结束 -->

css部分：

.wrap{

    width: 1000px;

    margin: 0 auto;

}

.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;

}

.nav_right{

    width: 10px;

    background: url('../images/nav_right.jpg') no-repeat;

}

.nav_left,.nav_mid,.nav_right{

    float: left;

    height: 40px;

    /* 元素内没有内容，无法撑开，设置高度将元素撑开 */

}

找了好久找不到问题到底出在哪里，把中间部分宽度调到700px以下才能让左中右在同一行显示，请各位大神帮帮忙