不同电子邮件客户端中的奇怪<ul>间距</ul>

时间:2015-01-29 23:00:25

标签: html email outlook

我正在使用MailChimp处理HTML电子邮件。在电子邮件中,我有两个单独的无组织列表,它们之间有间隔。

Gmail和Mail(Mac)中的电子邮件看起来不错,但Outlook中的间距确实很大。我最初使用休息时间很宽。然后我使用了<p>标记,它在Gmail和Mail中看起来很棒,但在Outlook中,两个列表之间没有任何空格。

这是使用的代码:

<ul style="line-height: 20.8000011444092px;">
<li><span style="font-size:16px"><span style="font-family:arial,helvetica neue,helvetica,sans-serif">How many times you&rsquo;ve checked your blood glucose in a day and how many strips you have left. What&rsquo;s really cool is when you only have 10 days of supplies remaining,&nbsp;we&rsquo;ll prompt you to approve a reorder through the XXXXX<sup>&reg;</sup></span></span><span style="font-size:16px"><span style="font-family:arial,helvetica neue,helvetica,sans-serif">&nbsp;blood glucose meter. All you have to do is say &ldquo;YES&rdquo; and we&rsquo;ll ship more supplies right to your home!</span></span></li>
<li><span style="font-size:16px"><span style="font-family:arial,helvetica neue,helvetica,sans-serif">How many steps you&rsquo;ve taken if you&rsquo;re using the pedometer function&nbsp;on XXXXX<sup>&reg;</sup>.</span></span></li>


放在这里看起来很正常,但在Outlook中间距是2英寸。关于如何解决UL间距问题的任何建议?

1 个答案:

答案 0 :(得分:0)

你可以使用保证金:右上角左下角http://jsfiddle.net/bzpk57py/3/

<ul style="line-height: 20.8000011444092px;">
<li style="margin:0 0 20px 0;"><span style="font-size:16px"><span style="font-family:arial,helvetica neue,helvetica,sans-serif">How many times you&rsquo;ve checked your blood glucose in a day and how many strips you have left. What&rsquo;s really cool is when you only have 10 days of supplies remaining,&nbsp;we&rsquo;ll prompt you to approve a reorder through the XXXXX<sup>&reg;</sup></span></span><span style="font-size:16px"><span style="font-family:arial,helvetica neue,helvetica,sans-serif">&nbsp;blood glucose meter. All you have to do is say &ldquo;YES&rdquo; and we&rsquo;ll ship more supplies right to your home!</span></span></li>
<li><span style="font-size:16px"><span style="font-family:arial,helvetica neue,helvetica,sans-serif">How many steps you&rsquo;ve taken if you&rsquo;re using the pedometer function&nbsp;on XXXXX<sup>&reg;</sup>.</span></span></li>

你也可以使用%而不是px

<ul style="line-height: 120%">
<li style="margin:0 0 4% 0"><span style="font-size:1em"><span style="font-family:arial,helvetica neue,helvetica,sans-serif">How many times you&rsquo;ve checked your blood glucose in a day and how many strips you have left. What&rsquo;s really cool is when you only have 10 days of supplies remaining,&nbsp;we&rsquo;ll prompt you to approve a reorder through the XXXXX<sup>&reg;</sup></span></span><span style="font-size:1em"><span style="font-family:arial,helvetica neue,helvetica,sans-serif">&nbsp;blood glucose meter. All you have to do is say &ldquo;YES&rdquo; and we&rsquo;ll ship more supplies right to your home!</span></span></li>
<li><span style="font-size:1em;"><span style="font-family:arial,helvetica neue,helvetica,sans-serif">How many steps you&rsquo;ve taken if you&rsquo;re using the pedometer function&nbsp;on XXXXX<sup>&reg;</sup>.</span></span></li>