2012.12.19 Wednesday | by
befine
まずはHTMLタグです。
<ul>
<li><a class="print" href="#">印刷</a></li>
<li><a class="mail" href="#">メール</a></li>
<li><a class="comment" href="#">コメントを書く!</a></li>
</ul>
これに対して以下のCSSを書いてください。
li { display:inline; }
ul li a {
display: inline-block; padding-left: 17px;
line-height: 12px; }
ul li a.print { background:url(print.png) no-repeat; }
ul li a.mail { background:url(mail.png) no-repeat; }
アイコンの位置は「
line-height」君が鍵を握っています。
文字の大きさに合わせて微調整してみてください。
文字が不要の時は上記のCSSに加えて以下を追加してください。
ul li a.print,
ul li a.mail {
width:12px;
height:12px;
text-indent:-9999px;}
「
text-indent」がものすごい数字ですが
これで文字をブラウザーの外にふっ飛ばしている訳です。
どちらの設定も「
display: inline-block;」が重要です。
高さと幅の指定をしていても inline-block になっていないと
アイコンが表示されませんのでご注意を!
でもこの子、古いブラウザーでは対応されないので
クロスブラウザ
(あらゆるブラウザで正常に動作し閲覧できること)を目指している方は
以下のサイトを参考に対策してくださ〜い。
【参考サイト】

CSS-EBLOG
不特定の数の横に並ぶブロック要素をセンタリングさせる