テキストウィジェットの画像は常に別の行に表示されます

Question

私の個人的なウェブサイトでは、私の他のオンラインプロファイル（linkedIn、StackOverflowなど）にリンクする小さなボタンを入れようとしています。

ホームページのサイドバーのテキストウィジェットにhtmlを追加しました。ボタンは期待どおりに機能します。

これらのボタンがすべて同じ行になるようになっても問題はありますが、私の人生ではなぜ彼らが異なる行にいるのか理解できません。

私が使用するHTMLコードは次のとおりです。

<!-- LinkedIn Piece --> 
<a href="https://nz.linkedin.com/pub/samuel-passmore/59/403/70a" style="text-decoration:none"> 
<img src="https://static.licdn.com/scds/common/u/img/webpromo/btn_in_20x15.png" width="30" height="22.5" border="0" style = "border-radius: 0em"></a> 
<!-- StackOverflow Piece --> 
<a href="http://stackoverflow.com/users/1544746/sampassmore" style="text-decoration:none;width: 30px"> 
<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" width="30" height="22.5"></a> 

そして、あなたは私のWebページ www.sampassmore.com

に現在の結果を見ることができる私は、私はIMGタグのマージンまで問題を縮小していると思います0pxに設定すると何もしないように見えました。

他に提案がありますか？

Answer 1

クラスを3つのウィジェットに追加し、display：inline-blockプロパティを追加します。タグのサイズを変更し、それらを適切にインラインで表示するには、そのプロパティが必要です。たとえば、次のように

a.social-icons { 
    display: inline-block 
}