对齐按钮html电子邮件
[英]align button html emails
问题描述
i'm creating a very basic html email layout, an one column layout: this is the layout skeleton: 
我正在创建一个非常基本的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>
in one row i have a button, its width is 100%: 在一行中有一个按钮，其宽度为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: 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
}
the button cover the entire width of the template, how can i make it smaller and centered? 按钮覆盖了模板的整个宽度，我如何使其更小且居中？ with on td in a row seems not quite possible, i try with setting margin but obviously doesnt work thanks 与连续td似乎不太可能，我尝试设置边距，但显然不起作用，谢谢
2 个解决方案
解决方案1
1 已采纳 2017-10-05 18:04:31
The issues I found in the code are. 我在代码中发现的问题是。
There is no need to capitalize CSS classes.
无需大写CSS类。 Not an issue but just stating! 没问题，只是说明！ Since you are setting the
background-colorfor thetdelement (bgcolor="#cc9435"), it seemed like the button was taking the full width of the table.由于您正在设置td元素的background-color（bgcolor="#cc9435"），因此该按钮似乎占用了表格的整个宽度。 I moved the background to theatag alone using thebackground-colorCSS property.我使用background-colorCSS属性将背景移到了a标签。I have reduced the padding property to one line
padding:12px 18pxwhere 12px is for the top and bottom padding and 18px is for the left and right padding, you need to increase the left and right padding to see and increase in the width of the button.我已将padding属性减小为一行padding:12px 18px，其中12px用于顶部和底部填充，18px用于左侧和右侧填充，您需要增加左侧和右侧填充以查看并增加其宽度按钮。
Let me know if this fixes your issue! 让我知道这是否可以解决您的问题！
.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>
解决方案2
0 2017-10-05 18:05:44
Add width and bg color only to a tag 仅将宽度和背景色添加到标签
<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>
Before update 更新之前
https://jsfiddle.net/17oj738e https://jsfiddle.net/17oj738e
After Update 更新后
https://jsfiddle.net/17oj738e/1/ https://jsfiddle.net/17oj738e/1/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.