2-4 烦请老师检查,谢谢

来源:2-4 编程练习

Miki未希

2020-05-25 00:20:48

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{margin:0;padding:0}
    .containter{width:1100px;
                height:100px;
                background:black;
                position:absolute;
                top:0;
                right:0;
                bottom:0;
                left:0;
                margin:auto;}
    div .logo{float:left;}
    div .nav{list-style:none;
             float:right;
             line-height:100px;
        text-align:center;
    }
    a{text-decoration:none;
      color:white;}
    div .nav li{display:inline-block;
                font-size:20px;
                font-family:"微软雅黑";
                margin-right:30px;
    }
    
    
    
    </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="containter">
      <a href="#"><img class="logo" src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/></a>
      <ul class="nav">
          <li><a href="#">课程</a></li>
          <li><a href="#">职业路径</a></li>
          <li><a href="#">实战</a></li>
          <li><a href="#">猿问</a></li>
          <li><a href="#">手记</a></li>
      </ul>
  </div>
</body>
</html>


写回答

1回答

好帮手慕小鱼

2020-05-25

同学你好,ul列表高度超出整个导航条所设高度,如下

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

由于将li转换为了行内块,所以li会带有行内元素的特点,存在默认间距。

建议:如果想要让li排列在一行,可以通过浮动实现。此时li默认是块元素,就不会存在默认间隙了

具体参考如下:

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

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

0

0 学习 · 40143 问题

查看课程