社交精灵图像与前面的跟随我们文本相同

Question

无论如何都要让Follow Us文本与精灵图像内联？

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块之外更为正确。然后，只需将display: inline-block;添加到.social_Emp类中，使ul的行为与文本一样：

http://jsfiddle.net/qeYQ4/

为了使文本与图标对齐，您可能还想用position: relative和top: 5px(或您喜欢的任何像素值(将文本包装在一个跨度中：

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

Answer 2

HTML

<ul class="social_Emp"><li>Follow us:</li>
              <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>

CSS

.social_Emp {position: relative;margin: 10px auto;}
.social_Emp li {background: url(http://www.bestjob.my/mod/CSS/sprites/Sprite_vertical.png) no-repeat;
position: absolute;display: block;list-style: none;}
.social_Emp a {height:24px;display: block;}
.social_Emp .Emp_twitter {left:76px;background-position: 0 -600px;width:24px;height:24px;}
.social_Emp .Emp_facebook {left:106px;background-position: 0 -645px;width:24px;height:24px;}
.social_Emp .Emp_google {left:136px;background-position: 0 -844px;width:24px;height:24px;} 

演示

Answer 3

.social_Emp {position: relative;margin: 10px}
.social_Emp li {background: url(http://www.bestjob.my/mod/CSS/sprites/Sprite_vertical.png) no-repeat;
}
.social_Emp a {height:24px;display: block;}
.social_Emp .Emp_twitter {left:20px;background-position: 0 -600px;width:24px;height:24px;float:left}
.social_Emp .Emp_facebook {left:50px;background-position: 0 -645px;width:24px;height:24px;float:left}
.social_Emp .Emp_google {left:80px;background-position: 0 -844px;width:24px;height:24px;float:left} 

请尝试此

Answer 4

您正在使用绝对位置进行li定位。你不能得到任何与绝对定位一致的东西。默认情况下，它从常规文档流中取出一个元素。

这里有一个JS Fiddle与修复：

http://jsfiddle.net/e2ScF/68/

更改：

.social_Emp li {
    display: inline-block;
    position: relative;
}