老师麻烦看下为什么li的文字会堆在一块，还有就是为什么设置了垂直居中的位置是在居中位置偏下？

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  *{padding:0;margin:0;}
  .content{
      background:black;
      width:1100px;
      height:100px;
      position:absolute;
      top:0;
      bottom:0;
      right:0;
      left:0;
      margin:auto auto;
  }
   
  .nav{
      background:url(http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png)no-repeat;
      width:300px;
      height:100px;
       
  }
 
  ul li{
      list-style-type :none;
         color:white;
      position:absolute;
      top:0;
      right:0;
      margin-top:50px;
        
        
  }
    /*此处写代码*/
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="content">
      <div class="nav"></div>
      <div class="ml">
          <ul>
              <li>课程</li>
              <li>职业路径</li>
              <li>实战</li>
              <li>猿问</li>
              <li>手记</li>
          </ul>
      </div>
  </div>
   
   
</body>
</html>

陈立天 2019-11-10

源自：CSS网页布局基础 2-4 编程练习

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2019-11-11 14:07:44

你好，

1、行高计算的是包含文字本身的高度加上文字上下两部分的间距。因为文字自身显示的特点，行高的间距两部分间距是相等的，例如：

所以当单行文本内容在一个盒子里面设置的行高值等于父元素高度值，除去文字本身的高度，上下两边的间距值一样，所以在盒子里面就垂直居中显示了。

2、导航项浮动或者定位都是可以的，这里只是为了方便用了浮动。

但是建议页面中尽量少的使用定位，因为定位一般需要根据父元素或者祖先元素的定位关系进行对照，内容多的时候容易混乱；并且定位的元素脱离文档流，父容器只能设置固定高度，否则会影响下面内容的位置，而且内容也不是固定的，所以不推荐大量使用定位。浮动虽然也会脱离文档流导致父容器塌陷，但是可以解决浮动带来的影响，定位的影响是没有办法解决的。

3、代码没有问题，不需要修改了哦，很棒！

如果我的回答帮助到了你，欢迎采纳！

祝学习愉快~

收起回答

好帮手慕星星 2019-11-11 10:49:34

同学你好，参考下面解释：

1、代码中给每个li设置了定位，并且定位在了同一个位置，所以进行堆叠。可以不使用定位，使用浮动，logo左浮动，导航右浮动，每个li左浮动显示。

2、代码中给li设置上间距为50px，只是文字开始位置距离顶部一半的距离，还需要考虑文字自身的高度，所以看起来偏下。建议不设置上间距，修改为行高与高度相等实现垂直居中。

参考修改：

自己修改测试下。如果我的回答帮助到了你，欢迎采纳！

祝学习愉快~

收起回答

提问者陈立天 #1

第一个问题：行高与高度相等是怎么实现垂直居中显示的，是什么原理啊？第二个问题：什么情况才用定位什么情况才用浮动？案例中的老师建议我logo和导航都是用浮动？是意味着这题不能用定位吗？第三个问题：我的代码已经写完，麻烦老师看看我的代码，这样的代码规范吗，需要什么更改的吗？ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{padding:0;margin:0;} .content{ background:black; width:1100px; height:100px; position:absolute; top:0; bottom:0; right:0; left:0; margin:auto auto; } .nav{ background:url(http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png)no-repeat; width:300px; height:100px; float:left; } .ml{ float:right; } ul li{ list-style-type :none; color:white; float:left; line-height:100px; height:100px; margin:0 20px; } /*此处写代码*/ </style> </head> <body>  <div class="content"> <div class="nav"></div> <div class="ml"> <ul> <li>课程</li> <li>职业路径</li> <li>实战</li> <li>猿问</li> <li>手记</li> </ul> </div> </div> </body> </html>

2019-11-11 11:59:08