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

Question

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

我已经开始了我的第一个网页设计元素，并决定使用 Foundation 5。我的网站顶部出现了一些问题。不幸的是，我不能在这里张贴一张图片，说明我多么想要它尽我所能地描述它。

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

我无法将所有内容放在同一行并且为每个 Angular 色设置不同的样式。

这是我目前拥有的:

<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使用图像，这样我就可以看到你在说什么(你也可以在那里看到我的更改)