Foundation for Emails (Ink) 菜单项分隔符答案

【问题标题】：Foundation for Emails (Ink) menu item separatorsFoundation for Emails (Ink) 菜单项分隔符
【发布时间】：2017-07-20 07:56:52
【问题描述】：

我正在使用 Foundation for Emails 构建一个电子邮件模板，并且我想在我的菜单项之间放置一个“ • ”。

除了 Outlook 之外，所有电子邮件客户端的一切都运行良好 - 菜单项之间的点不知何故下降到整个菜单下方，如下所示：

展望：

这是我的 Ink 代码：

<row>
    <columns small="12" large="4">
        <center>
            <menu class="small-vertical">
                <item href="#">
                    <span class="nav-item">
                        <font color="#010101">
                            menu item 1
                        </font>
                    </span>
                </item>
                <item>
                    <p style="color: #8d8e90;">•</p>
                </item>
                <item href="#">
                    <span class="nav-item">
                        <font color="#010101">
                            menu item 2
                        </font>
                    </span>
                </item>
                <item>
                    <p style="color: #8d8e90;">•</p>
                </item>
                <item href="#">
                    <span class="nav-item">
                        <font color="#010101">
                            menu item 3
                        </font>
                    </span>
                </item>
            </menu>
        </center>
    </columns>
</row>

如何绕过这个问题？

【问题讨论】：

标签： email zurb-foundation html-email

【解决方案1】：

项目符号是扩展字符，需要备用代码才能在 Outlook 和其他 html 和电子邮件客户端中正确显示。

扩展字符是那些不在标准 ASCII 字符集中的字符，它使用 7 位字符，因此具有 0 到 127 的值。ASCII 代码 0 到 31 和 127 是非打印控制字符，而代码 32 到 126匹配美式键盘上的键（“a”、“A”等）。

&#8226; 比&middot; 更粗略略高。您也可以使用 - 破折号。两者都适用于每个最新版本的 Outlook 和其他电子邮件客户端。

我再次查看了您的代码，发现您正在做很多 Outlook 无法理解的事情，例如 <item>。 Outlook 确实不使用 HTML5，因此用更好的项目符号替换项目符号可能没有多大作用。您不包含您的 HTML 代码、CSS 代码，只是一个 sn-p，这使得无法确定还有什么问题。

祝你好运。

【讨论】：

基金会电子邮件使用 HTML 5 元素使其易于使用。以下是他们在其网站上所说的：HTML 电子邮件需要表格上的表格才能正常工作。虽然 Foundation for Emails 为构建这些表格带来了很多麻烦，但我们使用 Inky 使它变得更加容易，Inky 是一种模板语言，可以将简单的 HTML 标记（如和）转换为复杂的表格 HTML。我个人喜欢编写自己的电子邮件。

【解决方案2】：

如何删除段落标签并在带有 href 的项目之间添加一个项目以显示项目符号？我觉得它可能会起作用。

对于要点，您可以尝试以下任一方法：

&bull; or &#149;

它们的工作方式相同以下是您的代码，我只是将段落更改为项目并希望它有效。

<row>
    <columns small="12" large="4">
        <center>
            <menu class="small-vertical">
                <item href="#">
                    <span class="nav-item">
                        <font color="#010101">
                            menu item 1
                        </font>
                    </span>
                </item>
                <item>
                    <item style="color: #8d8e90;">&#149;</item>
                </item>
                <item href="#">
                    <span class="nav-item">
                        <font color="#010101">
                            menu item 2
                        </font>
                    </span>
                </item>
                <item>
                    <item style="color: #8d8e90;">&#149;</item>
                </item>
                <item href="#">
                    <span class="nav-item">
                        <font color="#010101">
                            menu item 3
                        </font>
                    </span>
                </item>
            </menu>
        </center>
    </columns>
</row>

希望它有效。

【讨论】：