Css 社交精灵图片与前面的follow us文本相同

是否要使Follow Us文本与sprite图像内联

请关注我们：

由于Follow us:text不是列表的一部分，因此从语义上来说，将其置于

ul

块之外更为正确。然后，只需添加

display:inline块到
.social_Emp
类，使
ul
的行为与文本一样：


为了将文本与图标对齐，您可能还希望将文本包装在一个跨度中，其中包含
位置：相对
和
顶部：5px
（或您喜欢的任何像素值）：

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>


请尝试此
您正在使用绝对位置进行li定位。您无法获得任何与绝对定位相关的内容。默认情况下，它从常规文档流中取出一个元素

下面是一个JS修补程序：


所作的修改：

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

}

.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;} 

.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} 

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

}