How to arrange 4 social media icons in a row

Question

I'm totally new into HTML and CSS and I want to arrange four icons in a horizontal row, now it's vertical…

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

HTML Code:

<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> 

Answer 1

If you are going to use a table or would consider to use a table to output. Here in my own case, when I was designing an email template for the company I'm working with, this is how I align the Social Media icon with this code:

<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>

Hope this helps?

Answer 2

you can use this: a{float:left; width:20px}

Answer 3

use this css header a{display:inline-block; width:60px;}

http://jsfiddle.net/ygay1scd/