布局错乱,background不生效,list无法横排

布局错乱,background不生效,list无法横排

http://img1.sycdn.imooc.com//climg/5a2900f90001dece06730179.jpg

list的float为何没有生效,并且daohang的div和content的div没有上下排列,div默认的不是应该上下排列吗?

此外,为何daohang的background  黑色,没有生效呢?谢谢

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    .containner{margin:0 auto;}

    .daohang{background:black;}

    .logo{float:left;}

    .button{float:right;}

    .list{float:left;list-style:none;}

    .list2{list-style:none;}

    .list3{list-style:none;}

    .content{margin:0 auto;}

  </style>

</head>

<body>

  <div class="containner">

      <div class="daohang">

          <div class="logo">

              <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">

          </div>

          <div class="button">

             <ul class="list">

                  <li>课程</li>

                  <li>课程</li>

                  <li>课程</li>

                  <li>课程</li>

             </ul>      

          </div>      

      </div>

          <div class="content0">

          <div class="content01">

              <ul class="list2">

                  <li>职业路径</li>

                  <li>职业路径</li>

                  <li>职业路径</li>

                  <li>职业路径</li>

              </ul> 

          </div>

           <div class="content02">

             <ul class="list3">

                  <li>HTML</li>

                  <li>HTML</li>

                  <li>HTML</li>

                  <li>HTML</li>

              </ul> 

          </div>  

      </div>

      </div>

</body>

</html>



正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
樱桃小胖子 2017-12-08 09:49:47

给ul设置浮动会控制ul向左或者是向右移动。而不会使li横向排列。由于顶部的logo和导航有浮动,会导致高度塌陷,因此需要你设置content0{clear:both;}清除浮动,祝学习愉快~

樱桃小胖子 2017-12-07 17:25:34

黑色背景没有生效是因为没有高度,建议设置:

.daohang {
        background: black;
        width:100%;
        height:100px;
    }

    list的没有在同一行显示是因为你没有给list的li设置浮动,建议修改如下:

.list li{float:left;list-style:none;}

祝学习愉快~

  • 提问者 qq_不熄_0 #1
    你好,不是只要给ul设置浮动就可以了吗? 此外,为什么我的content01和content02布局都乱了呢,尤其是content01插入到logo和botton这之间了,div不是应该默认的竖直向下排列吗?
    2017-12-08 09:25:33
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师