老师,我的怎么实现li水平排列

老师,我的怎么实现li水平排列


<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    /*此处写代码*/

    .container{

        width:1100px;

        height:100px;

        background:#333;

        position:absolute;

        top:50%;

        left:50%;

        margin-top:-50px;

        margin-left:-550px;

    }

  

    .container ul{

        float:right;

        display:inline;

        height:100px;

        line-height:100px;


        

    }

     .container ul li{

        padding-left:30px;

        list-style: none;

    }

    

    

  </style>

</head>

<body>

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

  <div class="container">

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

     <ul>

         <li>课程</li>

         <li>职业经验</li>

         <li>实战</li>

         <li>猿问</li>

         <li>手记</li>

     </ul>

      

  </div>

</body>

</html>


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

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

2回答
好帮手慕星星 2020-02-14 09:57:30

同学你好,解答如下:

1、给ul设置右浮动,只会给ul添加样式,子元素li是不会继承的,所以也不会水平排列。

2、设置浮动后不添加display:block;属性也是可以的,浮动的元素会拥有块元素特性。

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

好帮手慕码 2020-02-13 19:10:17

同学你好,想要实现水平排列可以给其设置浮动。具体参考如下 :

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

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

效果:

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

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

  • 提问者 qq_慕标2503495 #1
    ul设置了右浮动,不能让里面的元素水平排列吗,还有li设置了左浮动,为什么还要设置block
    2020-02-13 19:20:40
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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