css - 社交精灵图像与前面的跟随我们文字相同的行

Question

无论如何要使“跟随我们”文本与精灵图像内联？

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/

为了使文本与图标对齐，您可能还希望将文本包装在一个 span 中，并使用position: relativeand 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;

}