I'm trying to create an HTML newsletter template that will show a list of tags at some point in that email. The number of elements of that list is dynamic. Instead of having a comma/space-separated list, I would like to style those tags with a border around each of the tags, for example.
我正在尝试创建一个HTML新闻稿模板,该模板将在该电子邮件中的某个位置显示标签列表。该列表的元素数量是动态的。例如,我想用这些标签设置每个标签周围的边框,而不是使用逗号/空格分隔的列表。
Formatting as a table will probably not work, because generating one for each tag will create a table too wide to display properly within its parent table. On the other hand, generating one will not result in an inline list.
格式化为表可能不起作用,因为为每个标记生成一个表将创建一个太宽的表,无法在其父表中正确显示。另一方面,生成一个将不会产生内联列表。
I thought of either doing it using with their css set to display:inline; or a set to display:inline; as well:
我想要使用他们的css设置来显示:inline;或一组显示:内联;以及:
<span class="hashtag-span">#hashtag</span>
<span class="hashtag-span">#anotherone</span>
or alternatively
<ul class="hashtag-list">
<li>#hashtag</li>
<li>#anotherone</li>
</ul>
Probably the trickiest part: this has to be Outlook-compatible :(
可能是最棘手的部分:这必须与Outlook兼容:(
You can see what I'd like to achive in my jsfiddle: http://jsfiddle.net/wo64xLnf/3/
你可以在我的jsfiddle中看到我想要的东西:http://jsfiddle.net/wo64xLnf/3/
Thanks for your help, crowd!
谢谢你的帮助,人群!
3 个解决方案
#1
Phillyoo, Outlook doesn't render 'display' style attributes. Even though the code above works, it will not render properly in Outlook.
Phillyoo,Outlook不呈现'display'样式属性。即使上面的代码有效,它也无法在Outlook中正确呈现。
Check out https://www.campaignmonitor.com/css/ - it's a good guide for designing emails.
查看https://www.campaignmonitor.com/css/ - 这是设计电子邮件的好指南。
You should be able to achieve your desired goal by using tables, rows, and td's. Use inline styling and apply 'align="left"' to your nested td's.
您应该能够通过使用表,行和标准来实现您期望的目标。使用内联样式并将'align =“left”'应用于嵌套的td。
Example:
<table width="100%">
<tr>
<td>
<table>
<tr>
<td align="left" style="">#hashtag</td>
</tr>
</table>
<table>
<tr>
<td align="left" style="">#hashtag</td>
</tr>
</table>
</td>
</tr>
</table>
You could also try having the TD tags in the same nested table and see how that works for you.
您也可以尝试在同一嵌套表中使用TD标签,看看它是如何工作的。
Best
#2
I actually Just had this exact same problem. Here is a solid solution I came up with:
我其实刚刚遇到了同样的问题。这是我提出的一个可靠的解决方案:
<tr>
<td align="left">
<table>
<tr>
<td valign="center" align="left" style="padding: 2px 2px 0 0;">
<span style="padding: 2px 4px; border: 1px solid #dddddd; border-radius: 6px; -webkit-border-radius: 6px;">
hashtag
</span>
</td>
</tr>
</table>
</td>
</tr>
#3
This is not an easy task at all and requires quite a bit of reiterate code. Your best bet is to use MSO conditional with tables to make it work for Outlook and divs with display:inline-block for most other clients. Span tags as objects has very spotty support in many clients, span is best used just for styling fonts in HTML email.
这根本不是一件容易的事,需要相当多的重复代码。您最好的选择是使用MSO条件表来使其适用于Outlook和divs与display:inline-block对于大多数其他客户端。作为对象的跨度标记在许多客户端中具有非常不稳定的支持,跨度最好仅用于HTML电子邮件中的样式字体。
See below for programmatic HTML block:
请参阅下面的程序化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]-->
And this is a full version using your HTML from the 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>
#1
Phillyoo, Outlook doesn't render 'display' style attributes. Even though the code above works, it will not render properly in Outlook.
Phillyoo,Outlook不呈现'display'样式属性。即使上面的代码有效,它也无法在Outlook中正确呈现。
Check out https://www.campaignmonitor.com/css/ - it's a good guide for designing emails.
查看https://www.campaignmonitor.com/css/ - 这是设计电子邮件的好指南。
You should be able to achieve your desired goal by using tables, rows, and td's. Use inline styling and apply 'align="left"' to your nested td's.
您应该能够通过使用表,行和标准来实现您期望的目标。使用内联样式并将'align =“left”'应用于嵌套的td。
Example:
<table width="100%">
<tr>
<td>
<table>
<tr>
<td align="left" style="">#hashtag</td>
</tr>
</table>
<table>
<tr>
<td align="left" style="">#hashtag</td>
</tr>
</table>
</td>
</tr>
</table>
You could also try having the TD tags in the same nested table and see how that works for you.
您也可以尝试在同一嵌套表中使用TD标签,看看它是如何工作的。
Best
#2
I actually Just had this exact same problem. Here is a solid solution I came up with:
我其实刚刚遇到了同样的问题。这是我提出的一个可靠的解决方案:
<tr>
<td align="left">
<table>
<tr>
<td valign="center" align="left" style="padding: 2px 2px 0 0;">
<span style="padding: 2px 4px; border: 1px solid #dddddd; border-radius: 6px; -webkit-border-radius: 6px;">
hashtag
</span>
</td>
</tr>
</table>
</td>
</tr>
#3
This is not an easy task at all and requires quite a bit of reiterate code. Your best bet is to use MSO conditional with tables to make it work for Outlook and divs with display:inline-block for most other clients. Span tags as objects has very spotty support in many clients, span is best used just for styling fonts in HTML email.
这根本不是一件容易的事,需要相当多的重复代码。您最好的选择是使用MSO条件表来使其适用于Outlook和divs与display:inline-block对于大多数其他客户端。作为对象的跨度标记在许多客户端中具有非常不稳定的支持,跨度最好仅用于HTML电子邮件中的样式字体。
See below for programmatic HTML block:
请参阅下面的程序化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]-->
And this is a full version using your HTML from the 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>