Question

我正在尝试创建一个HTML新闻稿模板，该模板将在该电子邮件的某个位置显示标签列表。该列表的元素数量是动态的。例如，我想用这些标签设置每个标签周围的边框，而不是使用逗号/空格分隔列表。

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

我想要使用他们的css设置来显示：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/

感谢您的帮助，人群！

Answer 1

Phillyoo，Outlook不呈现'display'样式属性。即使上面的代码有效，它也无法在Outlook中正确呈现。

查看https://www.campaignmonitor.com/css/ - 这是设计电子邮件的好指南。

您应该能够通过使用表格，行和标准来实现您期望的目标。使用内联样式并将'align =“left”'应用于嵌套的td。

示例：

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

您也可以尝试在同一嵌套表中使用TD标签，看看它是如何工作的。

最佳

Answer 2

我实际上只是遇到了同样的问题。这是我提出的一个可靠的解决方案：

2015-10-15 14:12:10.530 x itemPresets --> 0
2015-10-15 14:12:10.530 x itemPresets --> 0
2015-10-15 14:12:10.674 x itemPresets --> 3
2015-10-15 14:12:10.674 x itemPresets[section] --> 9
2015-10-15 14:12:10.675 x itemPresets[section] --> 6
2015-10-15 14:12:10.675 x itemPresets[section] --> 10

Answer 3

这根本不是一件容易的事，需要相当多的重复代码。您最好的选择是使用MSO条件表来使其适用于Outlook和divs与display：inline-block对于大多数其他客户端。 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]-->

这是一个使用你的小提琴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电子邮件中的标签内联列表

3 个答案: