【发布时间】：2021-07-09 19:17:12
【问题描述】：
我对 HTML 完全陌生。我正在为 Action Network 中的电子邮件创建模板，但是，我不知道如何定位我创建的元素。我希望捐赠按钮位于中间，所有社交媒体链接位于右侧，顶部徽标下方。当我尝试将徽标向右移动时，它们最终位于白色区域而不是徽标下方。任何帮助表示赞赏。代码如下：
#outlook a {
padding: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
.image_fix {
display: block;
}
p {
margin: 1em 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #404040
}
table td {
border-collapse: collapse;
}
@media only screen and (max-device-width: 480px) {
a[href^="tel"],
a[href^="sms"] {
text-decoration: none;
color: blue;
cursor: default;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: default;
color: orange;
pointer-events: auto;
cursor: default;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
a[href^="tel"],
a[href^="sms"] {
text-decoration: none;
color: blue;
cursor: default;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: default;
color: orange;
pointer-events: auto;
cursor: default;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {}
@media only screen and (-webkit-device-pixel-ratio:.75) {}
@media only screen and (-webkit-device-pixel-ratio:1) {}
@media only screen and (-webkit-device-pixel-ratio:1.5) {}<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="margin: 0;padding: 0;background-color: #FFFFFF;width: 100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;">
<center>
<table cellpadding="0" cellspacing="0" border="0" align="center" id="backgroundTable" style="margin: 0;padding: 0;background-color: #FFFFFF;height: 100% !important;width: 100% !important; line-height: 100% !important; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"
role="presentation">
<tr>
<td align="center" valign="top" style="border-collapse: collapse;">
<table border="0" cellpadding="0" cellspacing="0" align="center" style="border: 0;background-color: #FFFFFF; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" role="presentation">
<tr>
<td align="center" valign="top" style="border-collapse: collapse;">
<table border="0" cellpadding="10" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" role="presentation">
<tr>
<td valign="top" style="border-collapse: collapse; background-color: #FFFFFF; padding:10px 10px 10px;">
<table border="0" cellpadding="10" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" role="presentation">
<tr>
<td valign="top" style="border-collapse: collapse;" width="600">
<div style="color: #383838;font-family: Arial;font-size: 16px;line-height: 150%;text-align: left;">
<center>
<img src="https://can2-prod.s3.amazonaws.com/email_templates/logos/000/029/586/original/centerrrr.png" style="max-width:1492px; width: 100%; margin: 20px auto" />
</center>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<a href="https://www.facebook.com/communityalternatives" style="background: #3B5998;color: white; padding: 10px; font-size: 15px; width: 15px; text-align: center; text-decoration: none; border-radius: 50%;" class="fa fa-facebook"></a>
<a href="https://twitter.com/CCA_NY?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" style="background: #55ACEE; color: white; padding: 10px; font-size: 15px; width: 15px; text-align: center; text-decoration: none; border-radius: 50%;" class="fa fa-twitter"></a>
<a href="https://www.instagram.com/ccalternatives/?hl=en" style="background: #C13584; color: white; padding: 10px; font-size: 15px; width: 15px; text-align: center; text-decoration: none; border-radius: 50%;" class="fa fa-instagram"></a>
<b><a href="https://www.instagram.com/ccalternatives/?hl=en" style= "background: #1B4164; color: white; padding: 10px 20px; with: 10%; height: 5%; font-size: 12px; width: 15px; text-align: center; text-decoration: none; border-radius: 25px"> DONATE </a></b>
<br>
<br>
<b><div style="color: #1B4164;font-family: Arial;font-size: 14px;line-height: 125%;text-align: center;"> Center for Community Alternatives</div></b>
<div style="font-family: Arial;font-size: 14px;line-height: 125%;text-align: center;"> <a href="https://www.communityalternatives.org/">communityalternatives.org </a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" style="border-collapse: collapse;">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #FFFFFF;border-top: 2px solid #909090; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" role="presentation">
<tr>
<td valign="top" style="border-collapse: collapse;">
<table border="0" cellpadding="10" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" role="presentation">
<tr>
<td colspan="2" valign="middle" style="border-collapse: collapse;background-color: #FFFFFF;border-top: 0;">
<div style="color: #707070;font-family: Arial;font-size: 11px;line-height: 125%;text-align: left;">
Sent via <a href="http://actionnetwork.org">ActionNetwork.org</a>. To update your email address or to stop receiving emails from [your group name], please <a href="[unsub link]" style="color: #0096DB;font-weight: normal;text-decoration: underline;">click here</a>.
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
</center>
</body>【问题讨论】：
-
看起来不像是在创建模板，而是在修改模板。那里有很多旧技术和过时的元素。浏览器嗅探是一种过时的策略，
center元素已被弃用。换行符不应用于布局间距。这就是 margin 和 padding 的优势。 body 标记上的所有这些间距属性也已过时。我会考虑重新开始，或者至少从更现代的布局开始。 -
但是，要尝试一般性答案，请考虑在表格中添加更多行和单元格来定位您的项目。见developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics。
-
这是 HTML 电子邮件，我们一直在其中使用已弃用的功能！这是 1990 年代的风格，添加了一些移动设备！
标签： html html-email