问答详情
源自:3-5 企业网站制作之导航部分制作(二)

搜索框出现在下一排了,麻烦帮忙看看哪儿错了,谢谢!

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

http://img.mukewang.com/58522f16000166fa13620324.jpg

我检查过nav_middle宽度为980px,nav_middle_left为680px,nav_middle_right为300px;

其中的搜索框才190px,然后又将.nav_middle_left li:after{clear:both;}了一下,还是没有改变。。。


提问者:慕用1475049 2016-12-15 13:54

个回答

  • 青湛
    2017-01-02 11:09:22
    已采纳

    你可能弄错原因了,错误原因是nav_middle_left这个div,和nav_middle_right这个div并没有设置浮动,他们是块级元素,必然会换行,你是在搜索框的样式上设置的左浮动,他的意思是搜索框在nav_middle_right这个块中左浮动,并不是让你的这个快去浮动贴着nav_middle_left这个块

  • 慕用1475049
    2016-12-15 14:04:38

    找到解决办法了,将<div class="nav_middle_right clearfix">中clearfix去掉,但是原理我还没有太明白的