Question

你好，我有基础6的问题。在我的页脚有一个社交列表有4个图标（电话，电子邮件，推特，脸书）我不能让他们保持居中调整大小。在我的电脑上看起来不错，然而，上传到网上并在我的手机上查看（nexus 6）图标偏离左侧中心。这是我的页脚代码

<footer>
    <!--social icons should be centered -->
    <div class="row">        
        <div class="large-3 medium-centered columns">
            <ul class="menu social">
                <li>
                    <a href="http://www.twitter.com">
                        <i class="fi-social-twitter"></i>
                    </a>
                </li>
                <li>
                    <a href="http://www.facebook.com">
                        <i class="fi-social-facebook"></i>
                    </a>
                </li>  
                <li>
                    <a href="tel:12345678901 ;="">
                        <i class="fi-telephone"></i></a>
                </li>
                <li>
                    <a href="mailto:info@example.com">
                        <i class="fi-mail"></i>
                    </a>
                </li>     
            </ul>
        </div>
    </div>         
    <p class="text-center copyright"> All Rights Reserved Final FInal 2016.</p>
</footer>

该网站是www.gastromob.com。我真的可以使用一些关于如何改进这个网站的建议。我有几个问题，但我想先解决这个问题，谢谢。

Answer 1

您使用的类medium-centered意味着将一列放在一行中;它不会将文本置于该列的中心。

Foundation 6建议在<div class="menu-centered">周围使用<ul class="menu">包装器。如果您使用的是Flexbox，则不需要包装器，而是可以将.align-center类添加到ul元素中。请点击here了解详情。

此处似乎没有必要使用row和column包装。

您可以通过这种方式编写代码以实现您的需求：

<footer>
  <div class="menu-centered">
    <ul class="menu">
      <li>
        <a href="http://www.twitter.com">
          <i class="fi-social-twitter"></i>
        </a>
      </li>
      <li>
        <a href="http://www.facebook.com">
          <i class="fi-social-facebook"></i>
        </a>
      </li>
      <li>
        <a href="tel:12345678901">
          <i class="fi-telephone"></i>
        </a>
      </li>
      <li>
        <a href="mailto:info@example.com">
          <i class="fi-mail"></i>
        </a>
      </li>
    </ul>
  </div>
  <p class="text-center copyright"> All Rights Reserved Final FInal 2016.</p>
</footer>

顺便说一句，href="tel:12345678901 ;=""不正确，应该是href="tel:1234567890"。

我还查看了您的网站，发现您为元素<div id="overlay">设置了固定的高度。因此，在小型设备上查看网站时，此覆盖图会溢出并覆盖其下方的元素。你应该简单地删除固定的高度来解决这个问题。

当缩小屏幕尺寸时，船标识也会妨碍视线。您可能也想让它具有响应性。

除此之外，所有其他元素都具有响应性并且看起来很棒！

基金会6调整问题并使问题集中

1 个答案: