Question

好吧，所以我从Zurb网站上获得了这个页脚代码，我编辑了它并使用它来实现我所需要的。但现在我遇到了问题。

enter image description here

了解新闻与新闻媒体栏目向右推？任何人都可以帮我修改我的代码吗？

HTML

   <footer class="footer">
  <div class="row full-width">
      <h4>Looking for Something?</h4>
    <div class="small-6 medium-3 large-2 columns">
      <div class="sitemap">
          <h5>C-A-L Innovations</h5>
        <ul class="footer-links">
        <li><a href="index.html">Home</a></li>
        <li><a href="https://calinnovations.wordpress.com/">Blog</a></li>
          </ul>
    </div>
      </div>
      <div class="small-6 medium-3 large-2 columns">
      <div class="sitemap">
          <h5>Understanding CALi</h5>
        <ul class="footer-links">
        <li><a href="pandp.html">Purpose & People</a></li>
        <li><a href="core.html">Core Strengths</a></li>
        <li><a href="dream.html">The Dream</a></li>
        <li><a href="policies.html">Policies</a></li>
          </ul>
    </div>
      </div>
      <div class="small-6 medium-3 large-2 columns">
      <div class="sitemap">
          <h5>Innovations</h5>
        <ul class="footer-links">
        <li><a href="kinkless.html">Kinkless</a></li>
        <li><a href="comingsoon.html">Coming Soon</a></li>
          </ul>
    </div>
      </div>
      <div class="small-6 medium-3 large-2 columns">
      <div class="sitemap">
          <h5>News & Media</h5>
        <ul class="footer-links">
        <li><a href="social.html">Social Media</a></li>
        <li><a href="press.html">Press Releases</a></li>
            <li><a href="contactus.html">Contact Us</a></li>
          </ul>
          </div>
      </div>
      </div>
</footer>

CSS

    /* Footer Styles */
    .full-width {
      max-width: 1400px;
    }

    .footer {
      background-color: #016B98;
      padding: 1rem;
      text-align: center;
      color: #fff;
    }

    .footer h4 {
    font-size: 15px;
    }

    .footer h5 {
    font-size: 13px;
    }

    .footer li {
    font-size: 13px;
    }

    .footer a {
    color: white;
    }

    .footer a:hover {
    color: #BCD955;
    }

    .footer a:visited {
    color: #FF859C
    }

    .footer li {
    text-decoration: none;
    list-style-type: none;
    }

    .footer h4 {
    color: #BCD955;
    }

.footer .sitemap{
text-align: left;
}

请＆amp;谢谢你的帮助！

Answer 1

IT看起来像是在使用网格，而且你有四列。

div class="small-6 medium-3 large-2 columns">

对于小号，您有6 small-6，因此每个组将占用该页面的一半。

对于中等版本，您有3 medium-3，因此每个组占据该页面的1/4。

但是对于大：你有large-2，这意味着你有一个额外的空白区域。（2,4,6,8）

尝试将large-2设置为large-3并查看是否有帮助。

我确实认为这是这个问题。

为什么我的页脚的最后一列被扭曲到最右边？

1 个答案: