.nav_left与.nav_mid和.nav_right不在一行上?

来源:3-8 企业网站制作之焦点图制作

青霜

2015-10-28 16:17

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

http://img.mukewang.com/563084980001f2de10090451.jpg

写回答 关注

3回答

  • 渺渺水上
    2015-11-11 17:41:07
    .nav{
    height: 40px;
    clear:both;
    }


    qq_慕侠1...

    亲,为什么这样就可以了呢?

    2016-11-05 21:28:33

    共 1 条回复 >

  • 漠北哥哥
    2015-10-29 14:42:36

    意思是,你要这三个div在一行需要他们是同级的关系

    青霜

    我又看了下,nav_left、nav_mid、nav_right就是三个并列的同级关系啊,nav_mid_left和nav_mid_mid_right又并列在nav_mid内部

    2015-10-29 15:52:31

    共 1 条回复 >

  • 漠北哥哥
    2015-10-28 16:48:42

    你这nav_left和nav_mid是兄弟,nav_mid是nav_right他老爸,这怎么在一行?


    青霜

    我仔细看了下,还没看出是什么问题,你能给我详细说下吗?先谢谢了

    2015-10-29 13:38:55

    共 1 条回复 >

企业网站综合布局实战

本课程重点介绍HTML/CSS实现常见企业网站布局的方法

157042 学习 · 1984 问题

查看课程

相似问题