如何连续安排4个社交媒体图标

我完全新进入的HTML和CSS，我想在一个水平行排列四个图标，现在它的垂直...如何连续安排4个社交媒体图标

/Users/ws-017/Desktop/Bildschirmfoto 2015-08-28 um 14.17.07.png

HTML代码：

<img src="img/artwrk.png" alt="ARTWRK" height="250" width="250"> 
    <header style="text-align:center"> 
     <a href="https://soundcloud.com/iamartwrk/" target="new" title="Soundcloud"> 
      <img class="socialicon" src="img/soundcloud.png" height="50" width="50"> 
     </a> 
     <a href="https://www.facebook.com/iamartwrk/"target="new" title="Facebook"> 
      <img class="socialicon" src="img/facebook.png" height="50" width="50"> 
     </a> 
     <a href="https://twitter.com/iamartwrk/" target="new" title="Twitter"> 
      <img class="socialicon" src="img/twitter.png" height="50" width="50"> 
     </a> 
     <a href="https://instagram.com/iamartwrk/" target="new" title="Instagram"> 
      <img class="socialicon" src="img/instagram.png" height="50" width="50"> 
     </a> 
    </header>

来源

2015-08-28 Fabio Schaufelberger

使用这个CSS header a{display:inline-block; width:60px;}

http://jsfiddle.net/ygay1scd/

来源

2015-08-28 12:26:21

现在他们排列成一个块，而不是一排，他们有一个黑色的框架哈哈 –

请张贴您的CSS –

我刚刚删除了一些其他的CSS，现在它的作品哈哈，你能告诉我如何设置所有图标之间的距离相同？ –

可以使用这：a {float：left; width：20px}

来源

2015-08-30 13:53:52

如果您打算使用表格或考虑使用表格输出。在这里，在我自己的情况下，当我设计了我的工作，公司的电子邮件模板，我这是怎么排列的社会媒体图标使用此代码：

<table width="20" align="right" border="0" cellpadding="0" cellspacing="5"> 
    <tr> 
     <td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;"> 
      <a href="http://www.facebook.com/" style="color: #ffffff;"> 
      <img src="img/facebook.png" alt="Facebook" width="25" height="25" style="display: inline-block;" border="0" /> 
      </a> 
     </td>          
     <td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;"> 
      <a href="http://www.twitter.com/" style="color: #ffffff;"> 
      <img src="img/twitter.png" alt="Twitter" width="25" height="25" style="display: inline-block;" border="0" /> 
      </a> 
     </td> 
     <td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;"> 
      <a href="http://www.linkedin.com/" style="color: #ffffff;"> 
      <img src="img/linkedin.png" alt="LinkedIn" width="25" height="25" style="display: inline-block;" border="0" /> 
      </a> 
     </td> 
    </tr> 
</table>

希望这有助于？

来源

2017-03-15 10:34:29

如何连续安排4个社交媒体图标

回答

相关问题