Question

编码和学习如何创建HTML电子邮件的新手。我选择了一封随机电子邮件，然后尝试复制它。

我正在尝试将Google图片与Apple Play商店图片对齐，并将社交媒体图标全部放在左侧。

我搜索了W3，Google和Stack Overflow。我试图添加填充。

感谢您的协助。

                         <tr>
                            <td>
                                <img src="/img/applestorelogo.png" width="auto" height="24" style=" display: inline-block;" alt="applestorelogo"/>
                            </td>
                            <td>
                                <img src="/img/googlestore.png" width="auto" height="24" alt="googlestore"/>
                            </td>
                            <td><img src="/img/fb.png" width="auto" height="24"  alt="facebook"/>
                            </td>
                            <td><img src="/img/IG.png" width="auto" height="24" alt="instagram"/>
                            </td>
                            <td><img src="/img/twitter.png" width="auto" height="24" alt="twitter"/>
                            </td>
                        </tr>

下面是image

Answer 1

我认为您应该只使用三个<table border="1" style="width:50%"> <tr> <td style="text-align: center; width: 5%;"> <img src="/img/applestorelogo.png" width="auto" height="24" alt="applestorelogo"/> </td> <td style="text-align: center;width: 5%;"> <img src="/img/googlestore.png" width="auto" height="24" alt="googlestore"/> </td> <td style="text-align: right;"> <img src="/img/fb.png" width="auto" height="24" alt="facebook"/> <img src="/img/IG.png" width="auto" height="24" alt="instagram"/> <img src="/img/twitter.png" width="auto" height="24" alt="twitter"/> </td> </tr> </table>。

以下是您的方案的想法。您可能需要根据布局更改宽度：

{{1}}

Answer 2

    <tr style="display: inline-block;">
            <td>
                <img style="border: 2px red solid" src="/img/applestorelogo.png" alt="applestorelogo"/>
            </td>
            <td>
             <img style="border: 2px red solid" src="/img/googlestore.png" alt="googlestore"/>
            </td>
            <td>
                <img style="border: 2px red solid" src="/img/fb.png" alt="facebook"/>
            </td>
            <td>
                <img style="border: 2px red solid" src="/img/IG.png" alt="instagram"/>
            </td>
            <td>
                <img style="border: 2px red solid" src="/img/twitter.png" alt="twitter"/>
            </td>
        </tr>

忽略边框。我是用它来解决问题的。

HTML电子邮件的左对齐图像出现问题

2 个答案: