如何为Outlook创建适配的邮件HTML标记（无表格对齐SKU与数量）

核心问题分析 #

你用<pre>标签加制表符对齐失效，是因为Outlook对<pre>的解析兼容性差，且Calibri是非等宽字体，制表符/空格的宽度不固定，无法实现稳定对齐。

优化方案（无需table标签） #

用固定宽度的内联块级元素模拟表格列，完全适配Outlook，代码示例如下：

<p style="font-size: 11pt; font-family: Calibri, sans-serif; margin: 4px 0;">
  <span style="display: inline-block; width: 120px;">6-14/01</span> quantity: 20
</p>
<p style="font-size: 11pt; font-family: Calibri, sans-serif; margin: 4px 0;">
  <span style="display: inline-block; width: 120px;">6-14/01</span> quantity: 14
</p>
<p style="font-size: 11pt; font-family: Calibri, sans-serif; margin: 4px 0;">
  <span style="display: inline-block; width: 120px;">17-902/01</span> quantity: 24
</p>
<p style="font-size: 11pt; font-family: Calibri, sans-serif; margin: 4px 0;">
  <span style="display: inline-block; width: 120px;">589-00/01</span> quantity: 16
</p>
<p style="font-size: 11pt; font-family: Calibri, sans-serif; margin: 4px 0;">
  <span style="display: inline-block; width: 120px;">589-00/01</span> quantity: 16
</p>

方案说明 #

1. 用<p>代替<pre>：避免Outlook对预格式化文本的异常解析
2. 固定宽度<span>：给SKU区域设置width:120px（可根据你最长的SKU调整数值），display:inline-block让元素保持在行内且支持宽度设置，确保所有SKU占据相同宽度，数量部分自然对齐
3. 内联样式：Outlook对外部样式表支持极差，所有样式必须直接写在元素的style属性中
4. 间距控制：通过<p>的margin设置行与行之间的间距，避免内容拥挤

内容的提问来源于stack exchange，提问作者Дмитрий Кондратенко