对齐按钮 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 元素 (bgcolor="#cc9435") 设置 background-color，因此按钮似乎占据了 [=] 的整个宽度44=]。我使用 background-color CSS 属性.

a

我已将内边距属性减少到一行 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 封电子邮件

align button html emails

html

css

html-email