HTML 电子邮件表格按钮

Question

我一直在尝试将我们的电子邮件从使用一堆图像更新为只使用代码，但我在使用表格时遇到了问题。我似乎无法让 's 像我需要的那样狭窄。我想要的只是让它们彼此靠近并左对齐。我以前从未使用过表格，但我阅读了它们，一切似乎都是正确的，但没有任何效果。关于我需要编辑的内容有什么建议吗？ PS 这将在 Outlook 上经常看到，因此这是一个重要因素。

http://codepen.io/Mdadedesign/pen/qavwkg

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<tr style='mso-yfti-irow:4;mso-yfti-lastrow:yes; background-color:pink; width:300px'>


          <td width="90" style="background-color:lightblue;">
            <table width="90" style="float:left;">
              <tr>
                <td>
                  <table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
                    <tbody>
                    <tr>
                      <td align="center">
                        <table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
                          <tr>
                            <td align="left" bgcolor="#075aa0" width="90" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 5px;width: 90px;display: block;text-decoration: none;text-align: center;font-weight: bold;font-size: 11.5px;font-family: sans-serif;color: #ffffff;border: 1px solid red;line-height:15px;">
                              <a href="http://premierdisability.com/" style="text-decoration:none;color:#fff;">
                                Android App
                              </a>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </table>
          </td>


          <td width="70" style="background-color:cornsilk;">
            <table width="70" style="float:left;">
              <tr>
                <td>
                  <table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
                    <tbody>
                    <tr>
                      <td align="center">
                        <table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
                          <tr>
                            <td align="center" bgcolor="#075aa0" width="70" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 5px;width: 90px;display: block;text-decoration: none;text-align: center;font-weight: bold;font-size: 11.5px;font-family: sans-serif;color: #ffffff;border: 1px solid red;line-height:15px;">
                              <a href="http://premierdisability.com/" style="text-decoration:none;color:#fff;">
                                Apple App
                              </a>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </table>
          </td>


          <td width="70" style="background-color:lightblue;">
            <table width="70" style="float:left;">
              <tr>
                <td>
                  <table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
                    <tbody>
                    <tr>
                      <td align="center">
                        <table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
                          <tr>
                            <td align="left" bgcolor="#075aa0" width="90" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 5px;width: 90px;display: block;text-decoration: none;text-align: center;font-weight: bold;font-size: 11.5px;font-family: sans-serif;color: #ffffff;border: 1px solid red;line-height:15px;">
                              <a href="http://premierdisability.com/" style="text-decoration:none;color:#fff;">
                                Refer A Friend
                              </a>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </table>
          </td>


                  </tr>

Answer 1

你说的是底部的三个按钮，“Android App”、“Apple App”和“推荐朋友”，对吧？

如果您查看您拥有的样式，您会在表格上设置一个宽度，并在每个按钮的样式中设置一个以 px 为单位的宽度。实际上，总宽度并没有那么多，但是您可以将第一个从 90px 更改为 70px，将第二个从 90px 更改为 60px，最后一个从 90px 更改为 80px。如果你想让它们比这更小，你必须把它们放在一起，或者减小文本和可点击区域的大小。