css - 社交 Sprite 图像与前面的“关注我们”文本在同一行

Question

有什么方法可以使 Follow Us 文本与 sprite 图像内联？

http://jsfiddle.net/e2ScF/66/

<ul class="social_Emp">&nbsp;&nbsp;&nbsp;Follow us:
  <li class="Emp_twitter"><a href="{if $userInfo.TwitterPage} {$userInfo.TwitterPage}{else}#{/if}" alt="Twitter"></a></li>
  <li class="Emp_facebook"><a href="{if $userInfo.FBPage}{$userInfo.FBPage}{else}#{/if}" alt="Facebook"></a></li>
  <li class="Emp_google"><a href="{if $userInfo.GooglePage}{$userInfo.GooglePage}{else}#{/if}" alt="Google"></a></li>
</ul>

Answer 1

因为 Follow us: 文本不是列表的一部分，所以将它放在 ul block 之外在语义上会更正确。然后，只需将 display: inline-block; 添加到 .social_Emp 类中，使 ul 的行为就像文本一样:

http://jsfiddle.net/qeYQ4/

为了将文本与图标对齐，您可能还想将文本包裹在一个带有 position: relative 和 top: 5px(或任何像素你喜欢的值):

http://jsfiddle.net/qeYQ4/1/