Question

所以，我正在尝试发送一封包含用户信息的电子邮件。它应该是这样的：

但由于某种原因，css将无法在电子邮件中使用，因为它看起来像这样：

CSS如下：

div.block { 
      margin: 0; 
      padding: 0; 
      padding-bottom: 1.25em;
      margin-left: 130px;
    } 

    div.block label { 
      margin: 0; 
      padding: 0; 
      display: block; 
      font-size: 100%; 
      padding-top: .1em; 
      padding-right: .25em; 
      width: 6em; 
      text-align: right; 
      float: left; 
    } 

    div.block span { 
      margin: 0; 
      padding: 0; 
      display: block; 
      font-size: 100%; 
    }

我的HTML：

<div class="block">
   <label>Voornaam:</label>
   <span>%voornaam%</span>
</div>
<div class="block">
   <label>Achternaam:</label>
   <span>%achternaam%</span>
</div>
<div class="block">
   <label>E-mailadres:</label>
   <span>%email%</span>
</div>
<div class="block">
   <label>Telefoon:</label>
   <span>%telefoon%</span>
</div>
<div class="block">
   <label>Toelichting:</label>
   <span>%toelichting%</span>
</div>
<div class="block">
   <label>Datum:</label>
   <span>%datum%</span>
</div>

Answer 1

电子邮件中的CSS仍然不受支持。对于您想要的布局，使用带有内联样式的<table>而不是基于div的布局将是实现它的最佳方式。

Answer 2

如果图像是您需要的，那么表就可以了。您可以将padding-left调整为您认为最适合布局的内容。您可以向表格本身添加margin-left: 10px或其他内容，以便将表格更多地移到右侧。

<table class="emailtable">
<tr>
    <td>Voornaam:</td>
    <td style="padding-left: 40px;">%voornaam%</td>
</tr>
<tr>
    <td>Achternaam:</td>
    <td style="padding-left: 40px;">%achternaam%</td>
</tr>
<tr>
    <td>E-mailadres:</td>
    <td style="padding-left: 40px;">%email%</td>
</tr>
<tr>
    <td>Telefoon:</td>
    <td style="padding-left: 40px;">%telefoon%</td>
</tr>
<tr>
    <td>Toelichting:</td>
    <td style="padding-left: 40px;">%toelichting%</td>
</tr>
<tr>
    <td>Datum:</td>
    <td style="padding-left: 40px;">%datum%</td>
</tr>

Answer 3

CSS中的一些简单修改将解决这个问题：

div.block { 
    margin: 0; 
    padding: 0; 
    padding-bottom: 1.25em;
    margin-left: 130px;
} 

div.block label { 
    margin: 0; 
    padding: 0; 
    display: inline-block; 
    font-size: 100%; 
    padding-top: .1em; 
    padding-right: 2em; 
    width: 6em; 
    text-align: right; 
} 

div.block span { 
    margin: 0; 
    padding: 0; 
    display: inline-block; 
    font-size: 100%; 
    width: 20em;
}

我准备了一个jsfiddle作为示范：https://jsfiddle.net/zL2ntzdh/

这就是说我想补充一点，在电子邮件中使用HTML标记是一件值得怀疑的事情。是的，它确实使消息看起来更有光泽。但它带来了巨大的缺点：消息大小将成倍增加，您的消息被视为垃圾邮件的机会自动成倍增加，您请求收件人的最终信任，因此您必须期望他们中的许多人将默默地删除消息以防止安全问题。

无法使用内联标签内联电子邮件

3 个答案: