2-4編程練習,那裡可以改善?

2-4編程練習,那裡可以改善?

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    body{margin:0;padding:0;}
    .content{width:1100px;height:100px;background:black;}
    .nav{color:#FFF;position:absolute;left:400px;top:20px;font-size:20px;}
    .nav ul li{display:inline;margin:20px;}
    

    
  </style>
</head>
<body>
  <!-- 此处写代码 -->
   <div class="content">
   <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/>
      
    
      
     <div class="nav"> 
     <ul>
         <li>課程</li>
         <li>職業路徑</li>
         <li>實戰</li>
         <li>猿問</li>
         <li>手記</li>
         
         
        
     </ul>
     
  </div>
     
     
     
     
      </div>
</body>
</html>


正在回答

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

1回答

同学你好,

1、导航条整体在水平和垂直方向上需要居中显示,可以用定位完成,如下:

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

2、右侧导航项没有垂直居中显示:

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

可以不用定位,用浮动完成,导航项垂直居中可以用行高实现,参考:

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

自己修改测试下,祝学习愉快!

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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