對齊按鈕HTML郵件

我創建一個非常基本的HTML郵件的佈局，一個一個列布局：這是佈局框架：對齊按鈕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似乎不太可能，我嘗試設置保證金，但顯然不工作謝謝

來源

2017-10-05 Lime In The Coconut

提供CSS如果有的話！ –

我現在加了它，但我不知道是否有幫助 –

我在代碼中發現的問題是。

沒有必要大寫CSS類。不是一個問題，只是說明！
由於您正在爲td元素（bgcolor="#cc9435"）設置background-color，因此好像該按鈕佔用了表格的整個寬度。我使用background-color CSS屬性將背景移至a標籤。
我已經padding屬性縮小到一個行padding:12px 18px其中12px的是頂部和底部填充和18像素是左和右填充，你需要增加左右填充看到和寬度增加的按鈕。

讓我知道這是否解決了您的問題！

.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>

來源

2017-10-05 18:04:31

添加寬度和背景顏色只有標籤

<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/後

來源

2017-10-05 18:05:44

對齊按鈕HTML郵件

回答

相關問題