2

ウェブサイトにアイコンを追加しようと必死になっていますが、正しく表示されません。私が欲しいのは、画像を含み、それらを一列に表示するコンテナです。次に、そのコンテナと画像の間にパディングを追加したいと思います。それだけです。

ここに私のアプローチを参照してください。誰かが私を助けて、実際に機能するように私のコードを修正することができれば、私はとても幸せです。

私のHTMLファイル：

<div class="icons">
    <div class="email"><a href="mailto:example@hotmail.com" title="email"></a></div>
    <div class="twitter"><a href="http://www.twitter.com" title="twitter">twitter</a>    
</div>

私のCSSでは：

.icons {
    margin-left:30px;
}

.icons .email { background: url(../images/social/email.png) left top no-repeat; }
.icons .twitter { background: url(../images/social/twitter.png) left top no-repeat; }

注：このコードは私には機能しませんでした。

4

3 に答える 3

3

アイコンの画像スプライトを作成します。次に、マークアップにリストを使用して、アイコン画像を背景画像としてそれぞれのアンカータグに設定します...このようなもの...

HTML

<ul>
<li><a href="" class="icon facebook">Facebook</a></li>
<li><a href="" class="icon twitter">Twitter</a></li>
<li><a href="" class="icon googleplus">Google Plus</a></li>
</ul>

CSS

ul li {
float:left;
display:block;
}

.icon {
width:25px;
height:25px;
display:block;
text-indent:-9999px;
background-image:url(http://tridentdesign.com/wp-content/uploads/2012/12/gemicon.jpg);
background-repeat:no-repeat;
}

.facebook {
background-position:-140px -115px;
}
.twitter {
background-position:-185px -115px;
}
.googleplus {
background-position:-140px -265px;
}

ここにデモンストレーションするフィドルがあります：

http://jsfiddle.net/Z8zkK/2/

編集： フィドルに一致するようにCSSを更新しました。

于 2013-03-26T19:29:08.870 に答える
1

CSSで画像を追加する場合は、少なくともHeightまたはを追加する必要があります。両方を追加することをお勧めします。タグwidthを使用して画像を追加する場合は、無視できます（必ずしもそうとは限りません） 。img

インラインにするには、を使用しているときに、クラスdivに追加float:leftします.icons

 .icons {
  margin-left:30px;
  float:left;
  width:50px;
  height:50px;
  }

による回答を使用することもできますKris Hollenbeck。その場合は、HTMLコードも書き直す必要があります。これは非常に望ましい方法です。

于 2013-03-26T19:33:36.063 に答える
-3

これはソーシャルウィジェットのデモですhttp://www.tech-fans.com/p/socialbox.html

ここから入手できます http://www.tech-fans.com/2013/03/socialbox.html

于 2013-03-26T20:44:35.030 に答える