イメージを隣り合わせに配置する方法

Question

現在、CSSに応答していないため、何が問題なのかよく分かりません。お互いの上にあるすべての画像とテキストが重なるだけです。画像は、CSSで示されているように、50 x 50ピクセルではなく元のサイズです。

HTML：

<p> Connect with Steven on </p> 

<div class=socialmedialinks> 

<a href="https://www.facebook.com/Established.in.1995" class=links> <img src="FBProfilePic.jpg" alt="Facebook"> 
    </a> Facebook  


<a href="http://twitter.com/stevenperkinsii" class=links> <img src="TwitterProfilePic.jpg" alt="Twitter"> 
    </a> Twitter 


<a href="https://www.linkedin.com/in/steven-perkins-9319ba93?trk=hp-identity-name" class=links> <img src="LinkedInProfilePic.jpg" alt="LinkedIn"> 
    </a> LinkedIn 



<a href="http://www.stevensperkins.wordpress.com/" class=links> <img src="WordPressProfilePic.jpg" alt="WordPress"> 
    </a> WordPress 

</div> 

CSS：

.socialmedialinks {text-align:justify; width:50px} 
.links{ 
display: inline-block; width:50px; height:50px; 
} 

Answer 1

スティーブンあなたが探しているの出力の例を持っているのですか？あなたがやろうとしていることを正しく理解しているならば、あなたはあなたのアウトプットで問題を作り出している、ここで起こっているさまざまな問題を抱えています。

まず第一に、あなたは画像の大きさに制約を任意のスタイルを持っていない、あなたは次のスタイルの定義が必要になります。

.links img { 
    max-width:50px; 
    max-height:50px; 
} 

画像に対するテキストの配置については、あなたが持っています物事があなたの望むように表示されないようにする構造上の問題。実際にクラス名を引用符で囲む必要がありますが、それはここでは重要ではありません。私はあなたのコードを少し修正して、あなたが望んでいると思うものを作りました。もしあなたが探しているものではないものがあるなら、私に知らせてください。 ：https://jsfiddle.net/7k5nn1n7/

Answer 2

これは、あなたがしようとしているものです：

<p> Connect with Steven on </p> 
<div class="socialmedialinks"> 
<div class="links"><a href="https://www.facebook.com/Established.in.1995"><img alt="Facebooki" src="FBProfilePic.jpg">Facebook</a></div> 
<div class="links"><a href="http://twitter.com/stevenperkinsii"><img alt="Twitter" src="TwitterProfilePic.jpg">Twitter</a></div> 
<div class="links"><a href="https://www.linkedin.com/in/steven-perkins-9319ba93?trk=hp-identity-name"><img alt="LinkedIn" src="LinkedInProfilePic.jpg">LinkedIn</a></div> 
<div class="links"><a href="http://www.stevensperkins.wordpress.com/"><img alt="WordPress" src="WordPressProfilePic.jpg">WordPress</a></div> 
</div> 

CSS：

.socialmedialinks { 
    width:100%; 
} 
.links{ 
    float:left; 
    padding-left:2%; 
} 
.links img { 
    width:50px; 
    height:50px; 
} 

Answer 3

あなたは、各クラス名をリンク付けることができます。 alt = ""ではなく、リンクにtitle = ""を追加します。 イメージタグを削除します。 CSSを使用してリンクに画像を追加できます。 CSSここ

<a href="https://www.facebook.com/Established.in.1995" class=facebook title="Face Book"></a> 
<a href="http://twitter.com/stevenperkinsii" class=twitter title="Twitter"></a> 
<a href="https://www.linkedin.com/in/steven-perkins-9319ba93?trk=hp-identity-name" class=linkedin title="Linkedin"></a> 
<a href="http://www.stevensperkins.wordpress.com/" class=wordpress title="WordPress"></a> 

されています：あなたが持っている場合

は

.socialmedialinks a:link, 
    .socialmedialinks a:active 
    .socialmedialinks a:visited{ 
     text-indent: -9999em; 
     width:50px; 
     height:50px; 
     margin-right: 3px; 
     float: left; 
     padding:0; 
    } 

    .facebook {background: url('FBProfilePic.jpg') no-repeat;} 
    .twitter{background: url('TwitterProfilePic.jpg') no-repeat;} 
    .linkedin{background: url('LinkedInProfilePic.jpg') no-repeat;} 
    .wordpress{background: url('WordPressProfilePic.jpg') no-repeat;} 

ご質問は、私に知らせてください、ここで

は、HTMLのコードです。おかげ

Answer 4

次のコードを試してみてください。

HTML

<p>Connect With Steven on </p> 
    <h4 class="social"> 
    <a href="#" class="link"><img src="facebook.jpg" alt="Facebook"></a>Facebook</h4> 
    <h4 class="social"> 
    <a href="#" class="link"><img src="twitter.png" alt="Twitter"></a>Twitter</h4> 
    <h4 class="social"> 
    <a href="#" class="link"><img src="youtube.png" alt="Youtube"></a>Youtube</h4> 
    <h4 class="social"> 
    <a href="#" class="link"><img src="instagram.jpg" alt="Instagram"></a>Instagram</h4> 

CSSここで

img{ 
      height: 50px; 
      width: 50px; 
      margin-right: 4px; 
     } 
     h4{ 
      width: 150px; 
      float:left; 
     } 

は、サンプルフィドルです：Fiddle