没有缩进的 HTML 项目符号答案

【问题标题】：HTML Bullet point with no indent没有缩进的 HTML 项目符号
【发布时间】：2014-04-08 15:10:52
【问题描述】：

我正在创建一个 html 电子邮件，并希望创建不缩进的项目符号。因为它是一封电子邮件，所以它必须是 html 和内联 CSS。有没有办法编辑你的子弹设置？这些是多行项目符号。

【问题讨论】：

【解决方案1】：

只需将&bull; 放在行首，而不是列表：

&bull; List item here<br />
&bull; Another list item here

呈现为：

• 在此处列出项目
• 此处的另一个列表项

这样您可以确保电子邮件客户端之间的一致性。

【讨论】：

@JohnB，这不是电子邮件中的“任何事情都发生”，而是电子邮件客户端并未广泛支持 css。因此，我们使用 hack 来完成工作，就像前几代网页设计师在浏览器支持 css 之前使用表格进行布局一样。

【解决方案2】：

您可以选择两个属性来改变项目符号的位置： list-style-position: outside; list-style-position: inside;

然后相应地调整填充。

但是，您仍然需要处理各个电子邮件客户端中的显示差异。

【讨论】：

【解决方案3】：

只需将 UL 的边距和填充设置为零。

<ul style="margin:0;padding:0">
  <li></li>
</ul>

【讨论】：

【解决方案4】：

无序列表标签有一个默认的填充，你可以通过给margin-left: -10px css来覆盖它。这应该可以解决您的问题。

在提供 0px 填充时，您最终会失去子弹。

谢谢

【讨论】：