gpt4 book ai didi

html-email - HTML 电子邮件中的内联标签列表

转载 作者:行者123 更新时间:2023-12-04 08:55:14 25 4
gpt4 key购买 nike

我正在尝试创建一个 HTML 时事通讯模板,该模板将在该电子邮件中的某个点显示标签列表。该列表的元素数量是动态的。例如,我不想用逗号/空格分隔的列表来设置这些标签的样式,每个标签周围都有边框。

格式化为表格可能不起作用,因为为每个标签生成一个表格会创建一个太宽的表格,无法在其父表格中正确显示。另一方面,生成一个不会导致内联列表。

我想要么使用他们的 css 设置为 display:inline;或一组显示:内联;还有:

<span class="hashtag-span">#hashtag</span>
<span class="hashtag-span">#anotherone</span>

或者
<ul class="hashtag-list">
<li>#hashtag</li>
<li>#anotherone</li>
</ul>

可能是最棘手的部分:这必须与 Outlook 兼容 :(

你可以在我的 jsfiddle 中看到我想要实现的目标:
http://jsfiddle.net/wo64xLnf/3/

感谢您的帮助,人群!

最佳答案

这根本不是一项容易的任务,需要大量的重复代码。您最好的选择是对表格使用 MSO 条件,使其适用于 Outlook 和带有 display:inline-block 的 div,适用于大多数其他客户端。作为对象的 Span 标签在许多客户端中的支持非常不稳定,span 最好仅用于 HTML 电子邮件中的字体样式。

请参阅下面的编程 HTML 块:

 <!--[if ( gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]-->
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;">
<table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;">
<tr>
<td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#hashtag</td>
</tr>
</table>
</div>
<!--[if (mso) | (IE)]></td></tr></table><![endif]-->

这是使用 fiddle 中的 HTML 的完整版本:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<!--[if ( gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]-->
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;">
<table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;">
<tr>
<td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#hashtag</td>
</tr>
</table>
</div>
<!--[if (mso) | (IE)]></td></tr></table><![endif]-->
<!--[if ( gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]-->
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;">
<table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;">
<tr>
<td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#anotherone</td>
</tr>
</table>
</div>
<!--[if (mso) | (IE)]></td></tr></table><![endif]-->
<!--[if ( gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]-->
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;">
<table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;">
<tr>
<td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#anotherAwesomeHashtag</td>
</tr>
</table>
</div>
<!--[if (mso) | (IE)]></td></tr></table><![endif]-->
<!--[if ( gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]-->
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;">
<table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;">
<tr>
<td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#thiswillgoviral</td>
</tr>
</table>
</div>
<!--[if (mso) | (IE)]></td></tr></table><![endif]-->
<!--[if ( gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]-->
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;">
<table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;">
<tr>
<td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#hashtagcraziness</td>
</tr>
</table>
</div>
<!--[if (mso) | (IE)]></td></tr></table><![endif]-->
<!--[if ( gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]-->
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;">
<table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;">
<tr>
<td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#thisRocks</td>
</tr>
</table>
</div>
<!--[if (mso) | (IE)]></td></tr></table><![endif]-->
<!--[if ( gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]-->
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;">
<table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;">
<tr>
<td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#yetanotherone</td>
</tr>
</table>
</div>
<!--[if (mso) | (IE)]></td></tr></table><![endif]-->
<!--[if ( gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]-->
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;">
<table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;">
<tr>
<td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#onemore</td>
</tr>
</table>
</div>
<!--[if (mso) | (IE)]></td></tr></table><![endif]-->
<!--[if ( gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]-->
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;">
<table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;">
<tr>
<td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#lastone</td>
</tr>
</table>
</div>
<!--[if (mso) | (IE)]></td></tr></table><![endif]-->
</body>
</html>

关于html-email - HTML 电子邮件中的内联标签列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30207784/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com