对齐的问题

对齐的问题

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    *{

        margin:0;

        padding:0;

    }

    .banner{

        width:1100px;

        height:100px;

        position:absolute;

        top:50%;

        left:50%;

        margin-top:-50px;

        margin-left:-550px;

        background-color:#000;

    }

    .logo{

        float:left;

    }

    .list{

        color:white;

        width: 800px

        height: 100px;

        font-size: 20px;

        margin-right: 20px;

        padding-bottom: 40px;

    }

    ul li{

      float:right;

      margin:20px;

      display: inline;

      height: 100px;

      line-height: 100px;

      list-style: none;

    }

  </style>

</head>

<body>

  <div class="banner">

      <div class="logo">

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

      </div>

      <div class="list">

          <ul>

              <li>课程</li>

              <li>职业路径</li>

              <li>实战</li>

              <li>猿问</li>

              <li>手记</li>

          </ul>

      </div>

  </div>

</body>

</html>


正在回答

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

3回答

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

是可以的哦

居中原因是:设置了line-height即可使文字垂直居中,上下不需要再设置外边距了。

提问者 慕工程4228396 2018-01-04 20:02:05

什么原理呢?但是他们之间又没有距离了

  • 提问者 慕工程4228396 #1
    试过了,居中了但是没有距离了!还有问下为什么设置margin-right会居中
    2018-01-04 20:03:36
小于飞飞 2018-01-04 14:38:41

问题如下:

导航项没有垂直居中原因  ul li 中设置margin:20px;,改为 margin-right:20px; ,动手实践,加油!

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

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

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

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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