0

とにかく、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>
4

4 に答える 4

0

Follow us：テキストはリストの一部ではないため、ulブロックの外に出す方が意味的に正しいでしょう。次に、クラスに追加display: inline-block;して、テキストのように動作させます。.social_Empul

http://jsfiddle.net/qeYQ4/

テキストをアイコンに揃えるために、テキストをposition: relativeとtop: 5px（または任意のピクセル値）でスパンで折り返すこともできます。

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

于 2012-12-22T08:56:33.537 に答える
0

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

デモ

于 2012-12-22T08:57:10.853 に答える
0 
.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}

これを試してみてください

于 2012-12-22T08:58:04.573 に答える
0

liポジショニングに絶対位置を使用しています。絶対測位では何もインラインにできません。デフォルトでは、通常のドキュメントフローから要素を取り出します。

これが修正されたJSフィドルです：

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

行われた変更：

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

}
于 2012-12-22T09:03:47.420 に答える