2-4为什么不设置boxthree:margin-right:50%,那些导航项就不会显示呢?

2-4为什么不设置boxthree:margin-right:50%,那些导航项就不会显示呢?

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

 

    *{margin:0;

      padding:0;

      

    }

    .boxone{

        width:900px;

        height:100px;

        left:50%;

        top:50%;

        margin-top:-50px;

        margin-left:-450px;

        background:black;

        position:absolute;

        overflow:hidden;

    }

    

     .boxthree ul li{

                   list-style:none;

                    line-height:100px;

                    margin-right:30px;

                    color:white;

                    float:right;

                   

                    line-height:100px;

                    

        

    };

    .boxthree{margin-left:50%;}

    img{float:left;}

    

  </style>

</head>

<body>

  

   <div class="boxone">

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

  <div class="boxthree">

    <ul>

        <li>课程</li>

        <li>职业路径</li>

        <li>实践</li>

        <li>猿问</li>

        <li>手记</li>

    </ul>

  </div>

  </div>

</body>

</html>





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

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

2回答
好帮手慕夭夭 2020-04-16 19:14:50

同学你好,是想问为什么li不能设置右浮动吗?是因为顺序不对,老师上次也说了哦。右浮动是导航从右往左显示,建议观察一下效果图,是从左往右显示的,所以需要改成左浮动。如果让导航整体在右侧显示,给父元素设置右浮动即可。

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

祝学习愉快 !

好帮手慕夭夭 2020-04-16 17:14:38

同学你好,这里不需要设置 margin-left: 50%;也能显示。如下中,多写了一个分号,导致后面的 margin-left: 50%;样式不生效的。但是导航是显示的。

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

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

所以这里并没有用上,建议把如下注释了再测试一下哦。

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

另外,导航显示顺序不对,这是因为设置了右浮动,所以会从右往左开始浮动:

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

如下修改:

整体浮动到右侧,里面内容左浮动

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

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

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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