Question

我一直在尝试更新我们的电子邮件，使用一堆图像只是代码，但我遇到了使用表格的问题。我似乎无法让它变得像我需要的那样狭窄。我想要的只是让它们彼此相当接近并向左对齐。我之前从未使用过表格，但我读了它们，一切似乎都是正确的，但没有工作。关于我需要编辑什么的任何建议？ 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

您正在谈论底部的三个按钮，＆＃34; Android App＆＃34;，＆＃34; Apple App＆＃34;和＆＃34;推荐朋友＆＃34;，对吧？

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

HTML电子邮件表格按钮

1 个答案: