画像がHTMLページ内で隣り合って表示されない

Question

画像が隣り合わせに表示されない（表示：インラインブロックでも）何ができるのですか？

HTML & CSSコード：

.emb-web-links { 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: 30px; 
 
    padding-right: 20px; 
 
} 
 
.icons { 
 
    display: inline-block; 
 
}

<div class="emb-web-links" style="width: 26px;display:inline-block"> 
 
    <a style="text-decoration:  underline;transition: opacity 0.1s ease-in;color: #fff;" href="https://www.facebook.com/ifarmaciascom/?fref=ts" class="icons"> 
 
    <img style="border: 0;" src="https://i8.createsend1.com/static/eb/master/13-the-blueprint-3/images/facebook.png" target="_blank" width="26" height="26" /> 
 
    </a> 
 

 
    <a style="text-decoration: underline;transition: opacity 0.1s ease-in;color: #fff;" href="https://twitter.com/ifarmaciaspt" class="icons"> 
 
    <img style="border: 0;" src="https://i9.createsend1.com/static/eb/master/13-the-blueprint-3/images/twitter.png" target="balnk" width="26" height="26" /> 
 
    </a> 
 

 
    <a style="text-decoration: underline;transition: opacity 0.1s ease-in;color: #fff;" href="https://vimeo.com/user22709514/videos/"> 
 
    <img style="border: 0;" src="https://i10.createsend1.com/static/eb/master/13-the-blueprint-3/images/youtube.png" target="_blank" width="26" height="26" /> 
 
    </a> 
 

 
    <a style="text-decoration: underline;transition: opacity 0.1s ease-in;color: #fff;" href="https://pt.linkedin.com/company/ifarmacias-com" target="_blank"> 
 
    <img style="border: 0;" src="https://i3.createsend1.com/static/eb/master/13-the-blueprint-3/images/linkedin.png" width="26" height="26" /> 
 
    </a> 
 
</div>

Answer 1

インラインCSS幅

.emb-web-links { 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    padding-right: 20px; 
 
} 
 
.icons { 
 
    display: inline-block; 
 
}

<div class="emb-web-links"> 
 
    <a style="text-decoration:  underline;transition: opacity 0.1s ease-in;color: #fff;" href="https://www.facebook.com/ifarmaciascom/?fref=ts" class="icons"> 
 
    <img style="border: 0;" src="https://i8.createsend1.com/static/eb/master/13-the-blueprint-3/images/facebook.png" target="_blank" width="26" height="26" /> 
 
    </a> 
 

 
    <a style="text-decoration: underline;transition: opacity 0.1s ease-in;color: #fff;" href="https://twitter.com/ifarmaciaspt" class="icons"> 
 
    <img style="border: 0;" src="https://i9.createsend1.com/static/eb/master/13-the-blueprint-3/images/twitter.png" target="balnk" width="26" height="26" /> 
 
    </a> 
 

 
    <a style="text-decoration: underline;transition: opacity 0.1s ease-in;color: #fff;" href="https://vimeo.com/user22709514/videos/"> 
 
    <img style="border: 0;" src="https://i10.createsend1.com/static/eb/master/13-the-blueprint-3/images/youtube.png" target="_blank" width="26" height="26" /> 
 
    </a> 
 

 
    <a style="text-decoration: underline;transition: opacity 0.1s ease-in;color: #fff;" href="https://pt.linkedin.com/company/ifarmacias-com" target="_blank"> 
 
    <img style="border: 0;" src="https://i3.createsend1.com/static/eb/master/13-the-blueprint-3/images/linkedin.png" width="26" height="26" /> 
 
    </a> 
 
</div>

Answer 2

.emb-web-linksからインラインスタイルwidth: 26px;を削除します。

アイコンの幅と面積を拘束しています。

インラインCSSスタイルを使用したくないのが理想です。私はこのコードが最終的なものではないと仮定していますが、インラインCSSを関連する.emb-web-linksと.iconsクラスに移動しようとしています。