Outlook Windows应用程序中的子弹对齐问题

问题描述 投票：0回答：2

我有html电子邮件模板，并且有一个<ul>标记。列表的项目符号在Outlook Windows应用程序中无法正确对齐，但在浏览器中可以正常工作。

enter image description here

需要将其拉入以使其完全左对齐，甚至恰好在左边界内，并且应在应用程序和浏览器中均可以使用。

<table class=\"test\" border=\"0\" cellpadding=\"25\" cellspacing=\"0\" width=\"100%\">
    <tr>
<td bgcolor=\"#FFFFFF\" style=\"padding-top: 5.25%; padding-right: 5.25%; padding-bottom: 5.25%; padding-left: 5.25%;\">
    <ul style=\"margin-left: 20px; padding-left: 0;\">
        <li style=\"font-family:'open sans'; color: #252525; font-size: 16px; line-height: 24px; margin:0 0 5px 0;\">
                Test content 1
        </li>
        <li style=\"font-family:'open sans'; color: #252525; font-size: 16px; line-height: 24px; margin:0 0 30px 0;\">
                Test content 2
        </li>
    </ul>
</td>
</tr>
</table>

向应用程序左边缘<ul>多留出2像素对应用程序而言很好，但对浏览器而言则没问题。

outlook alignment html-lists html-email
2个回答
0
投票

[试用lists.cm，它是一个可帮助您创建在所有电子邮件客户端中均可使用的项目符号列表的工具。

或者，您可以只对每个<td>使用表格和<li>-所有电子邮件客户端都支持填充，因此您不需要特定于客户端的黑客。缺点是您将失去屏幕阅读器用户的语义。

0
投票

电子邮件客户端的位置和边距都很小。存在默认设置，Outlook往往无法在<ul> / <ol>边距下使用。因此，您必须在<li>中使用边距。

此外，Gmail网络邮件将在<li>的左侧留一个空白。

如果需要一致性，最好重置所有内容。使用以下内容，仅更改<li>中的边距。

<head>
<!--[if gte mso 9]>
<style>
li {
    text-indent:-1em;
}
</style>
<![endif]-->
</head>
<body>
<ul style="margin:0;padding:0;">
    <li style="margin:0 0 5px 30px;padding:0;">Point 1</li>
    <li style="margin:0 0 5px 30px;padding:0;">Point 2</li>
    <li style="margin:0 0 30px 30px;padding:0;">Point 3</li>
</ul>
</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.