老师有什么要完善的吗,还有里面都设置了float,父元素怎么没坍塌啊

老师有什么要完善的吗,还有里面都设置了float,父元素怎么没坍塌啊

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    /*此处写代码*/

    *{padding:0;

        margin:0;

    }

    .nav{width:1100px;

        background:black;

        position:absolute;

        top:50%;

        left:50%;

        margin-top: -50px;

        margin-left:-550px;

        z-index:-1;

    }

    .logo{

          float:left;

      }

    .item ul li{

        height:100px;

        color:white;

        float:left;

        list-style-type:none;

        font: bold 25px/100px "楷体";

        margin-left:40px;

        margin-right:20px;


      }

      .item{

            position:absolute;

            right:40px;

      }

    .logo,li{cursor:pointer;}

    }

  </style>

</head>

<body>

  <!-- 此处写代码 -->

  <div class="nav">

      <div class="logo">

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

      </div>

      <div class="item">

          <ul>

              <li>课程</li>

              <li>职业路径</li>

              <li>实战</li>

              <li>猿问</li>

              <li>手记</li>

          </ul>

      </div>

  </div>

</body>

</html>


正在回答

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

3回答

同学你好,是导航条nav设置的定位哦。包裹图片的盒子虽然设置了浮动,但是浮动图片本身是有高度的,所以将盒子的高度撑开了。然后盒子又撑开了父级导航条的高度。

如果我的回答帮助了你,欢迎采纳,祝学习愉快~

好帮手慕糖 2020-02-10 19:01:08

同学你好,非常抱歉,老师审查之后,发现有固定的高度,以为是同学设置的高度。

这里有高度是因为设置了定位,设置定位之后,由子元素(其实是logo图片)的高度撑开的。

祝学习愉快~

  • 提问者 慕用6004130 #1
    老师有点不太理解,logo图片我没设置定位啊,只设置了左漂浮,这样子还可以撑开?
    2020-02-10 19:06:56
好帮手慕糖 2020-02-10 18:43:17

同学你好,1、因为父级设置了固定的高度,所以不会坍塌的。

2、图片本身有间距,建议:可以给父级设置font-size:0去除,例:

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

如果我的回答帮助了你,欢迎采纳,祝学习愉快~

  • 提问者 慕用6004130 #1
    老师我父元素没设高度只设了宽度
    2020-02-10 18:45:42
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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