Question

我是HTML和CSS的新手，我想在水平行中排列四个图标，现在它是垂直的......

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

Answer 1

使用此css header a{display:inline-block; width:60px;}

http://jsfiddle.net/ygay1scd/

Answer 2

你可以使用这个：a {float：left;宽度：20像素}

Answer 3

如果您打算使用表格或考虑使用表格输出。在我自己的案例中，当我为我正在使用的公司设计电子邮件模板时，这就是我将社交媒体图标与此代码对齐的方式：

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

希望这有帮助吗？

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

3 个答案: