Question

网页设计新手在这里......

我已经开始了我的第一个网页设计项目，并决定使用基金会5.我在我的网站顶部遇到了一些麻烦..不幸的是我无法在这里发布一张图片我是怎么回事希望它如此恶心尝试并尽可能地描述它。

我想要＆＃34;电话＆＃34;和＆＃34;电子邮件＆＃34;大于电话号码和电子邮件地址，但都在同一行。然后我需要页面右侧的社交图标，再次全部对齐。

我无法将所有内容放在同一行并且每个角色都有不同的样式。

这就是我现在所拥有的：

<div class="row hide-for-small">

  <div class="large-4 columns"><p class"contact-top">Phone <span class="smaller">- 0757776856</span> <span class="contact-top">Email<span class="smaller">- luke@bodymetrix.com</span></p></div>

      <div class="large-1 columns">
          <img class="social-btn" src="img/facebook-btn.png" alt="Facebook">
          </div>
      </div>

      <div class="large-1 columns">
            <img class="social-btn" src="img/twitter-btn.png" alt="Twitter">
          </div>
      </div>

      <div class="large-1 columns">
            <img class="social-btn" src="img/pin-btn.png" alt="Pintrest">
          </div>
      </div>

      <div class="large-1 columns">
            <img class="social-btn" src="img/google-btn.png" alt="Google+">
          </div>
      </div>

  </div>

CSS：

.contact-top {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-variant: bold;
display: inline;

}

.smaller {
font-family: 'Open Sans', sans-serif;
font-size: 12px;

}

我希望这有点道理，没有图像真的难以描述！感谢

Answer 1

对于第一部分，一些标签保持打开，所以我修复了它。

变化：

<div class="large-4 columns"><p class"contact-top">Phone <span class="smaller">- 0757776856</span> <span class="contact-top">Email<span class="smaller">- luke@bodymetrix.com</span></p></div>

要：

<div class="large-4 columns">
  <p>
      <span class="contact-top">Phone</span><span class="smaller">- 0757776856</span> 
      <span class="contact-top">Email</span><span class="smaller">- luke@bodymetrix.com</span>
   </p>
</div>

对于第二部分，如果您可以使用图像更新此JsFiddle，以便我可以看到您正在谈论的内容（您还可以在那里看到我的更改）

使用Foundation 5在同一行上添加不同大小的文本和图像

1 个答案: