求救各位,为何我的nav_middle_right元素始终在nav_middle_left元素下面,谢谢!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<link href="css/main.css" rel="stylesheet" type="text/css"/>

<script src="js/setHomeSetFav.js" type="text/javascript" charset="gb2312"></script>

</head>


<body>

    <div class="top">

         <div class="top_content">

              <ul>

                  <li><a href="#">联系我们</a></li>

                  <li><a href="#" onclick="AddFavorite(window.location,document.title)">                       加入收藏</a></li>

                  <li><a href="#" onclick="SetHome(window.location)">设为首页</a></li>                                

              </ul>

         </div>

    </div><!--top结束-->

    <div class="wrap">

         <div class="logo">

              <div class="logo_left">

                  <img src="image/logo.jpg" alt="慕课网"/>

              </div>

              <div class="logo_right">

                   <img src="image/tel.jpg" alt="服务热线"/>24小时服务热线<span class="tel">                    :123-456-7890</span> 

              </div>

         </div><!--/*logo结束*/-->

         <div class="nav">

              <div class="nav_left">

              </div>

              <div class="nav_middle">

                   <div class="XP">

                       <ul>

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

                          <form action="" method="post">

                               <input type="text" />

                          </form>

                   </div>

              </div><!--navmiddle结束-->

         

              <div class="nav_right">

              </div>

         </div><!--NAV结束-->

    </div><!--/*wrap结束*/-->

</body>

</html>

////////////////////////////////////////////////////////////////CSS//////////////////////////////////////////

@charset "utf-8";

/* CSS Document */

*{margin:0;padding:0;font-size:12px}


/*头部*/

body{

background-color:#F5F5F5;

}

.top

{

width:100%;

height:27px;

background:url(../image/top_bg.jpg) repeat-x;}

.top_content

{

      width:1000px;

 margin:0 auto;}

 

.top_content li

{

    list-style-image:url(../image/li_bg.gif);

float:right;

width:70px;

line-height:27px;

}

.top_content a:link,.top_content a:visited

{

color:#8E8E8E;

text-decoration:none

}

.top_content a:hover,.top_content a:active

{

    color:#900;

text-decoration:none;

}

.wrap

{

width:1000px;

margin:0 auto;}

.logo

{

height:80px;

background-color:#FFF

}

.logo_left

{  

    width:200px;

float:left

}

.logo_right

{

width:300px;

float:right;

height:28px;

margin-top:30px;

color:#8E8E8E;

}

.logo_right img

{   vertical-align:middle;

     margin-right:10px

}

.tel

{

font-family:Arial, Helvetica, sans-serif;

font-size:16px;

color:#C00;}

.nav

{

height:40px;

}

.nav_left

{

width:10px;

background:url(../image/nav_left.jpg) no-repeat;

}

.nav_middle

{

width:980px;

background: url(../image/nav_bg.jpg) repeat-x;

}

.nav_right

{

width:10px;

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

}

.nav_left,.nav_middle,.nav_right

{

float:left;

height:40px}}




.XP

{

width: 680px;

float: left;

}

.nav_middle_right

{

width: 300px;

float: left;

}           


慕无忌2961384
浏览 1654回答 2
2回答

cnyballk

兄弟,你根本没有nav_middle_left  这个类

FSYu

楼上说的没毛病
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

CSS3
Html5