随着更大的屏幕移动页脚

Question

我的页脚有问题。

它在普通屏幕、平板电脑和手机上看起来很棒，但对于屏幕/分辨率更大的人来说，页脚一直都是靠左的。

在这里查看大屏幕屏幕截图：http://www.bkd.com/images/bkd-big-screen.png

这是实际的页面URL：http://www.bkd.com/new-test-2.htm

我需要的页脚留在与经验BKD标志在顶部。这是它在一个正常大小的屏幕上，我希望它是如何全面的：http://www.bkd.com/images/bkd-normal-screen.png

下面是页脚的代码：

   <div id="footer3">

   <div id="footer3-contents">
   <div class="span-6">
   <a href="https://www.facebook.com/BKDcpasandadvisors?ref=ts"><img width="23" height="25 alt="BKD Facebook" src="/images/icons/social-media/facebook-icon.png"></a>
   <a href="https://www.linkedin.com/company/bkd-cpas-&-advisors?trk=biz-companies-cym"><img width="25" height="25" alt="BKD LinkedIn" src="/images/icons/social-media/linkedin-icon.png" id="icons"></a>
   <a href="https://twitter.com/bkdllp"><img width="25" height="25" alt="BKD Twitter" src="/images/icons/social-media/twitter-icon.png" id="icons"></a>

   <a href="https://www.youtube.com/user/experienceBKD"><img width="25" height="25" alt="BKD Youtube"src="/images/icons/social-media/youtube-icon.png" id="icons"></a>
  <a href="https://plus.google.com/+BkdCPAsandadvisors/posts"><img width="25" height="25" alt="BKD Google Plus" src="/images/icons/social-media/google-icon.png"></a>



   </div>
   <div id="footer-legal" class="span-18 last">

   <ul>
   <li><a href="/contact-us/">Contact Us</a></li>
   <li><a href="/about-us/terms-of-use.htm">Terms of Use</a></li>
   <li> <a href="/about-us/privacy-policy.htm">Privacy Policy</a></li>
   <li> <a href="/about-us/disclosures.htm">Disclosures</a></li>
   <li> <a href="http://ultipro.bkd.com/">UltiPro</a></li>
   <li style="color:#fff">Copyright © 2014 BKD, LLP.</li>


   </ul>
   <a href="/about-us/praxity/"><img src="/images/praxity-white.png" width="101" height="47"></a>
   </div><div class="clear"></div>
   <div class="clear"></div></div></div><!--end footer -->




   </body>
   </html>

CSS：

    /*footer */
    #footer3 {padding:36px 0px; background: url(/images/common/footer/footer-black.png); background-repeat:text-align:left; width: auto; font-size:14px; font-weight:normal;}
    #footer3-contents { margin:10px; width: auto; padding-left: 95px;}
    #footer3 h2 { color:#fff;  font-size:12px; padding-left:0px; }
    #footer3 h2 a { color:#fff; }
    #footer3 a { color:#fff; }
    #footer3 #footer-legal ul { padding: 0px; margin:0px 0px 0px 0px;}
    #footer3 #footer-legal ul li {float:left; padding: 10px 10px 2px 0px;}
    #icons {padding-right:4px;}

提前感谢您的帮助。

Answer 1

#footer3-contents {
    margin: 0 auto;
    width: 1000px;
}

将#footer3-content更改为上面的内容，它就会起作用。

发生此问题的原因是因为您所做的一切都是在将原始代码中的页脚推到95px以上。您需要做的是为页脚内容设置一个定义的宽度，然后将两边的边距设置为相等。

如果两边的边距相等，则div将出现在网页的中心。

Answer 2

提供以%为单位的保证金价值，而不是px。