Question

我正在尝试在我的html5电子邮件中创建对齐项目符号，以便与标题保持一致，但正如您所看到的那样，它会缩进它们并占用大量空间。我已经删除了填充，但我认为前景阻止它，因为它在Iphone和Mac的邮件上看起来很好。

我在下面放了2张照片，所以你可以看一下代码片段

<ul><li><span style="color: #000000; font-family: Arial,sans-serif; font-size: 14px; line-height:17px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;"> We put you in front of millions of buyers through our huge advertising presence.</li>
<p><br> <li><span style="color: #000000; font-family: Arial,sans-serif; font-size: 14px; line-height:17px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;">Get matched to the perfect buyer through our vast database, looking for businesses just like yours!</li>
</p><br><p><li><span style="color: #000000; font-family: Arial,sans-serif; font-size: 14px; line-height:17px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;"> We don’t just do ‘off the shelf’ advertising! Ask us what we can do to sell your business.</li>
</p><br><p><li><span style="color: #000000; font-family: Arial,sans-serif; font-size: 14px; line-height:17px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;"> We sell businesses because buyers and sellers alike trust us. As we say, no fluff, no false promises and no egos!</li>
</p><br>
 <li><span style="color: #000000; font-family: Arial,sans-serif; font-size: 14px; line-height:17px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;">Optional video presentations and for sale boards give you maximum curb appeal and
exposure!</li>
<p><br> <li><span style="color: #000000; font-family: Arial,sans-serif; font-size: 14px; line-height:17px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;">Regular updates on the progress of your sale.</li>
</p><br><p><li><span style="color: #000000; font-family: Arial,sans-serif; font-size: 14px; line-height:17px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;"> Worried about confidentiality? We will handle the sale of your business according to your specific needs.</li>

</p><br><p><li><span style="color: #000000; font-family: Arial,sans-serif; font-size: 14px; line-height:17px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;"> We include <a href="" target="_blank">all-inclusive legal fees</a> when you sell the assets of your business (we cannot
include the legal fees on a share sale). We do this so that you know exactly what the cost to
sell will be at the beginning.</li>
</p></ul>

Answer 1

如果我没记错的话，因为您使用的是HTML电子邮件，因此您受到限制。我不知道这些限制的细节，但假设：

无法使用外部样式表
无法使用JavaScript
不确定是否禁止<style>阻止
内联样式（style属性只是样式的方式）。
表格通常用于布局，即使是语义霸主联盟也不会抱怨它。

更改

除了内容和一些核心样式外，其他所有内容都已删除。
用表格替换列表：

<table style="color: #000000; font-family: Arial,sans-serif; font-size: 14px;
  line-height:1.5; table-layout:fixed; border-collapse:collapse;">...</table>

该表是2列，第1列填充如下：

<th style="padding-right:.5em">•</th>

此列使用<th>，默认情况下，它们的内容水平和垂直居中，因此几乎没有任何调整，只是右边的.5em填充。

更新

OP要求子弹在垂直方向上定向到内容的开头：

<td style="padding-right:.5em;vertical-align: text-top;">•</td>

左列现在有<td>而不是<th>，因为默认值更容易从<td>处理。添加了vertical-align: baseline，这是一个很难的默认值。

段

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>00A00</title>
</head>
<body>
<table style="color: #000000; font-family: Arial,sans-serif; font-size: 14px;line-height:1.5; table-layout:fixed; border-collapse:collapse;">
<tbody>
  <tr><td style="padding-right:.5em;vertical-align: text-top;">•</td><td>We put you in front of millions of buyers through our huge advertising presence.</td></tr>
  <tr><td style="padding-right:.5em;vertical-align: text-top;">•</td><td>Get matched to the perfect buyer through our vast database, looking for businesses just like yours!</td></tr>
  <tr><td style="padding-right:.5em;vertical-align: text-top;">•</td><td>We don’t just do ‘off the shelf’ advertising! Ask us what we can do to sell your business.</td></tr>
  <tr><td style="padding-right:.5em;vertical-align: text-top;">•</td><td>We sell businesses because buyers and sellers alike trust us. As we say, no fluff, no false promises and no egos!</td></tr>

  <tr><td style="padding-right:.5em;vertical-align: text-top;">•</td><td>Optional video presentations and for sale boards give you maximum curb appeal and exposure!</td></tr>
  <tr><td style="padding-right:.5em;vertical-align: text-top;">•</td><td>Regular updates on the progress of your sale.</td></tr>
  <tr><td style="padding-right:.5em;vertical-align: text-top;">•</td><td>Worried about confidentiality? We will handle the sale of your business according to your specific needs.</td></tr>

  <tr><td style="padding-right:.5em;vertical-align: text-top;">•</td><td>We include <a href="" target="_blank">all-inclusive legal fees</a> when you sell the assets of your business (we cannot include the legal fees on a share sale). We do this so that you know exactly what the cost to sell will be at the beginning.</td></tr>
  </tbody>
  </table>

</body>
</html>

＆＃13;

Answer 2

你的标记有一些问题：由于p填充和断行，span没有正确关闭并且有一个双倍的空间。

在这里您可以看到更正后的版本：

<ul>
	<li><p><span style="color: #000000; font-family: Arial,sans-serif; font-size: 14px; line-height:17px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;"> We put you in front of millions of buyers through our huge advertising presence.</span></p></li>
	<li><p><span style="color: #000000; font-family: Arial,sans-serif; font-size: 14px; line-height:17px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;">Get matched to the perfect buyer through our vast database, looking for businesses just like yours!</span></p></li>
	<li><p><span style="color: #000000; font-family: Arial,sans-serif; font-size: 14px; line-height:17px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;"> We don’t just do ‘off the shelf’ advertising! Ask us what we can do to sell your business.</span></p></li>
	<li><p><span style="color: #000000; font-family: Arial,sans-serif; font-size: 14px; line-height:17px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;"> We sell businesses because buyers and sellers alike trust us. As we say, no fluff, no false promises and no egos!</span></p></li>
	<li><p><span style="color: #000000; font-family: Arial,sans-serif; font-size: 14px; line-height:17px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;">Optional video presentations and for sale boards give you maximum curb appeal and	exposure!</span></p></li>
	<li><p><span style="color: #000000; font-family: Arial,sans-serif; font-size: 14px; line-height:17px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;">Regular updates on the progress of your sale.</span></p></li>
	<li><p><span style="color: #000000; font-family: Arial,sans-serif; font-size: 14px; line-height:17px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;"> Worried about confidentiality? We will handle the sale of your business according to your specific needs.</span></p></li>
	<li><p><span style="color: #000000; font-family: Arial,sans-serif; font-size: 14px; line-height:17px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;"> We include <a href="" target="_blank">all-inclusive legal fees</a> when you sell the assets of your business (we cannot include the legal fees on a share sale). We do this so that you know exactly what the cost to sell will be at the beginning.</span></p></li>
</ul>

如何在html5电子邮件中对齐项目符号

2 个答案:

更改

更新

段