页脚宽度没撑开 图片直接有行距 设置固定定位之后页脚内容就不见了

页脚宽度没撑开 图片直接有行距 设置固定定位之后页脚内容就不见了

<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{margin:0;padding:0;}
    ul{list-style:none;
       
    }a{text-decoration:none;}
    .container{width:100%;margin:0 auto;}
    .header{width:100%;height:100px;background:black;overflow:hidden;zoom:1;margin:0 auto;position:fixed;}
    .header .logo{float:left;}
    .header .nav{float:right;}
    .header .nav li{float:left;margin-right:10px;}
    .header .nav li a{padding:0 15px;display:block;height:100px;line-height:100px;color:white;font-family:微软雅黑;}
    .main{margin:0;}
    .yejiao{width:100%;margin:0 auto;}
    .footer{width:100%;height:100px;background:black;overflow:hidden;
        margin:0 auto;
    }
    .yejiao .footer li{float:right;text-align:center;margin:0 auto;}
  .yejiao .footer li a{padding:0 30px;display:block;line-height:100px;font-family:微软雅黑;color:white;}
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="container">
      <div class="header">
          <div class="logo"><a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/></a>
         </div>
           <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>
              </div>
          
      <div class="main">
          <img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg">
          <img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg">
          <img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg">
          </div>
          <div class="yejiao">
          <div class="footer">
          <ul >
              <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>
              </div>
</body>
</html>

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

正在回答 回答被采纳积分+1

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

2回答
好帮手慕言 2019-06-10 09:54:27

同学你好,可以给ul元素设置宽度(子集宽度的总和),然后设置margin:0 auto;就可以实现居中了。因为li浮动了,所以要清浮,这里使用的是overflow: hidden;的方式。

代码可以参考:

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

如果帮助到了你,欢迎采纳,祝学习愉快~


好帮手慕言 2019-06-09 18:56:25

同学你好,

1、页脚是撑开的。但是图片宽度太大了,出现了横向滚动条,所以看起来是没有撑开。给图片设置宽度为100%就可以。

2、图片之间有间距是因为行内元素之间有间隙导致的。给img设置display: block;就可以了

3、页脚设置定位之后,设置偏移量就可以了。

代码参考:

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

如果帮助到了你,欢迎采纳,祝学习愉快~


  • 提问者 笑笑12345 #1
    好的 懂了 。但页脚的内容没法居中显示 麻烦解释下
    2019-06-09 20:20:10
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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