为什么我的UL跑到div右边去了?

外层一个DIV固定宽高,内层三个div 左浮动.(最后的元素清除过浮动).最后一步在中间的div里面加ul导航的时候发现
UL添加进div的时候不是默认的位置.

可是正常情况下UL添加进div里面应该是默认居左的呀

---------

代码如下:

html

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>慕课网</title>
   <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
   
   <div>
       <ul>
           <li><a href="#">设为首页</a></li>
           <li><a href="#">加入收藏</a></li>
           <li><a href="#">联系我们</a></li>
       </ul>
   </div>
   
   <div>
       
       <div class="head clears">
       
           <div>
               <img src="images/logo.jpg">
           </div>
           
           <div class="logo_right clears">
               <span></span>
               <p>
                   24小时服务电话:
                   <span>132-1212-1212</span>
               </p>
           </div>
       </div>
       
       <div class="nav clears">
           <div></div>
           <div>
               <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></div>
       </div>
   </div>
</body>
</html>

-------------------------------

css部分:

html, body{ margin:0; height:100%;background-color: #f5f5f5}
* {
   padding: 0;
   margin: 0;
   font-size: 12px;
}
.top a
{
   text-decoration:none;
   color: black;
}
.clears:after{content:'';display:block;clear:both; line-height:0px; overflow:hidden; font-size:0px; height:0px;}
/**
* 控制顶部
*/
.top
{
   height: 27px;
   width: 100%;
   background: url(../images/top_bg.jpg) repeat-x;
}
/**
* 控制顶部的li
*/
.top ul li
{
   list-style: none;
   list-style-image: url(../images/arrow.jpg);
   float: left;
   height: 27px;
   width: 70px;
   line-height:27px;/**字体垂直居中**/
}
/**
* 控制顶部的ul
*/
ul
{
   float: right;
   margin-right: 14%;
}
/**
* 页面主体外包装
*/
.wrap
{
   width: 1000px;
   margin: 0 auto;
}
.head
{
   background-color:#FFFFFF;
}

/**
* 控制logo左边图片
*/
.logo_left
{
   width: 200px;
   height: 80px;
   float: left;

}
.logo_right
{
   width: 300px;/*可修改*/
   height: 28px;
   float: right;
   margin-top: 30px;


}
.logo_tel
{
   font-size: 20px;
   color: black;
   line-height: 28px;
   color: #CC0000;
}
.telimage
{
   width: 28px;
   height: 28px;
   display: block;
   background: url(../images/tel.jpg) no-repeat;
   background-position: 50% 50%;
   float: left;
}
.logo_right p
{
   float: left;
   line-height: 28px;
   height: 28px;
}
.nav
{
   height: 40px;
   width: 1000px;
}
.navl
{
   background: url(../images/nav_left.jpg) no-repeat;
   height: 40px;
   width: 10px;
   float: left;
}
.navr
{
   background: url(../images/nav_right.jpg) no-repeat;
   height: 40px;
   width: 10px;
   float: left;
}
.navc
{
   background: url(../images/nav_bg.jpg) repeat-x;
   width: 980px;
   height: 40px;
   float: left;
   vertical-align:left;
}
.navc li
{
   list-style: none;
   float: left;
}
.navc a
{
   color: #FFFFFF
   ligin
}
.navc a:hover {color: #FFFF00} /* 鼠标悬停 */
.navc ul li
{
   /* width: 100px; */
}

__李大炮

浏览 2141回答 2

2回答

__李大炮

自己解决了.CSS里面有一个控制顶部UL 设置成所有UL居右了

0 0

随时随地看视频慕课网APP