老师请帮忙看一下代码是否正确

来源:2-4 编程练习

Aurora_Meteor

2020-02-21 18:12:23

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>work</title>

  <style type="text/css">

    /*此处写代码*/

    .container{

        width:1100px;

        height:100px;

        background:black;

        position:absolute;

        left:50%;

        top:50%;

        margin-top:-50px;

        margin-left:-550px;

    }

    .img{

        float:left;

    }

    .txt{

        float:right;

        height:100px;

    }

    .text{

        height:100px;

        line-height:100px;

        color:#fff;

        text-decoration:none;

        /*display:inline-block;*/

        margin:auto 20px;

    }

  </style>

</head>

<body>

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

  <div class="container">

      <div class="img">

          <a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/></a>

      </div>

      <div class="txt">

          <a href="#" class="text">课程</a>

          <a href="#" class="text">职业路径</a>

          <a href="#" class="text">实战</a>

          <a href="#" class="text">猿问</a>

          <a href="#" class="text">手记</a>

      </div>

  </div>

</body>

</html>

老师请检查一下代码有没有问题,我看起来貌似效果没问题

但是我觉得应该给导航项设置display:inline-block(css样式中我注释的那一句),可是我试了一下发现要不要那一句改为行内块元素实现的效果好像都是一样的。所以我想知道到底需不需要将a标签改为行内块元素。

写回答

1回答

樱桃小胖子

2020-02-21

同学你好,关于同学的疑问,解答如下:

1、效果实现的是可以的

2、因为没有给a设置高度,所以设置或者是去掉display:inline-block;效果都是一样的,但是,如果需要给a设置宽的话,就需要设置display:inline-block;或者是display:block;了

3、可以合并书写、简化代码,比如

http://img.mukewang.com/climg/5e4fbc5509e4700904240282.jpg

4、代码书写的不严谨,如margin:auto 20px;如果需要设置左右值,上下值设置成0即可。不需要设置成auto。

如果我的回答帮助了你,希望采纳,祝学习愉快!

0

0 学习 · 40143 问题

查看课程