对齐按钮html电子邮件

Question

我正在创建一个非常基本的html电子邮件布局，即一栏布局：这是布局框架：

<html>
  <head>
    <body>
      <table class="outer">
        <tr> <!-- structure of a single row--> 
          <td class="one column">
            <table>
              <tr>
                <td>

                </td>
              </tr>
            </table>
          </td>
        </tr> <!--END of a row-->
        <tr> </tr>
        <tr> </tr>
        <tr> </tr>
        <tr> </tr>
        <tr> </tr>
      </table>

    </body>
  </head>
</html>

在一行中有一个按钮，其宽度为100％：

<tr>
                <td class="one-column">
                  <table width="100%">
                    <tr>
                        <td align="center"  bgcolor="#cc9435" style="-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0px;" ><a href="#" target="_blank" style="font-size:16px;font-family:sans-serif, Helvetica, Arial;color:#ffffff;text-decoration:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding-top:12px;padding-bottom:12px;padding-right:18px;padding-left:18px;border-width:1px;border-style:solid;border-color:#cc9435;display:inline-block;" >button</a></td>
                    </tr>
                    <tr>
                      <td class="spacer">

                      </td>
                    </tr>
                  </table>
                </td>
              </tr>

CSS：

/* One column layout */
.one-column .contents {
    text-align: center;
}
.one-column p {
    Margin-bottom: 10px;
}
.outer {
Margin: 0 auto;
    width: 100%;
    max-width: 600px;
    background-color: #ffffff
}

按钮覆盖了模板的整个宽度，我如何使其更小且居中？ 与连续td似乎不太可能，我尝试设置边距，但显然不起作用，谢谢

Answer 1

我在代码中发现的问题是。

无需大写CSS类。 没问题，只是说明！
由于您正在设置td元素的background-color （ bgcolor="#cc9435" ），因此该按钮似乎占用了表格的整个宽度。 我使用background-color CSS属性将背景移到了a标签。
我已将padding属性减小为一行padding:12px 18px ，其中12px用于顶部和底部填充，18px用于左侧和右侧填充，您需要增加左侧和右侧填充以查看并增加其宽度按钮。

让我知道这是否可以解决您的问题！

 .td-style { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0px; } .a-style { font-size: 16px; font-family: sans-serif, Helvetica, Arial; color: #ffffff; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border-style: solid; border-color: #cc9435; display: inline-block; background-color: #cc9435; } .one-column .contents { text-align: center; } .one-column p { margin-bottom: 10px; } .outer { margin: 0 auto; width: 100%; max-width: 600px; background-color: #ffffff }

 <html> <head> <body> <table class="outer"> <tr> <!-- structure of a single row--> <td class="one column"> <table> <tr> <td> </td> </tr> </table> </td> </tr> <!--END of a row--> <tr> </tr> <tr> </tr> <tr> </tr> <tr> </tr> <tr> </tr> <tr> <td class="one-column"> <table width="100%"> <tr> <td align="center" style="td-style"> <a href="#" target="_blank" class="a-style">button</a> </td> </tr> <tr> <td class="spacer"> </td> </tr> </table> </td> </tr> </table> </body> </head> </html>

Answer 2

仅将宽度和背景色添加到标签

<td align="center" style="-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0px;"><a href="#" target="_blank" style="font-size:16px;font-family:sans-serif, Helvetica, Arial;color:#ffffff;text-decoration:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding-top:12px;padding-bottom:12px;padding-right:18px;padding-left:18px;border-width:1px;border-style:solid;border-color:#cc9435;display:inline-block; width: 159px; background: #CC9434;">button</a></td>

更新之前

https://jsfiddle.net/17oj738e

更新后

https://jsfiddle.net/17oj738e/1/

对齐按钮html电子邮件

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-10-05 18:04:31

解决方案2
0 2017-10-05 18:05:44

对齐按钮html电子邮件

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-10-05 18:04:31

解决方案2 0 2017-10-05 18:05:44

解决方案1
1 已采纳 2017-10-05 18:04:31

解决方案2
0 2017-10-05 18:05:44