不同电子邮件客户端中的奇怪 <ul> 间距
Strange <ul> spacing in different email clients
我正在使用 MailChimp 处理 HTML 电子邮件。在电子邮件中,我有两个单独的无组织列表,它们之间有一个中断。
电子邮件在 Gmail 和 Mail (Mac) 中看起来不错,但在 Outlook 中间距真的很奇怪。我最初使用了 break 并且 space 非常宽。然后我使用了一个 <p>
标签,它在 Gmail 和 Mail 中看起来很棒,但在 Outlook 中两个列表之间没有任何 space。
这是使用的代码:
<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’ve checked your blood glucose in a day and how many strips you have left. What’s really cool is when you only have 10 days of supplies remaining, we’ll prompt you to approve a reorder through the XXXXX<sup>®</sup></span></span><span style="font-size:16px"><span style="font-family:arial,helvetica neue,helvetica,sans-serif"> blood glucose meter. All you have to do is say “YES” and we’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’ve taken if you’re using the pedometer function on XXXXX<sup>®</sup>.</span></span></li>
放在这里看起来很正常,但在Outlook中间距是2英寸。关于如何解决我的 UL 间距问题有什么建议吗?
你可以使用 margin: top right bottom left 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’ve checked your blood glucose in a day and how many strips you have left. What’s really cool is when you only have 10 days of supplies remaining, we’ll prompt you to approve a reorder through the XXXXX<sup>®</sup></span></span><span style="font-size:16px"><span style="font-family:arial,helvetica neue,helvetica,sans-serif"> blood glucose meter. All you have to do is say “YES” and we’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’ve taken if you’re using the pedometer function on XXXXX<sup>®</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’ve checked your blood glucose in a day and how many strips you have left. What’s really cool is when you only have 10 days of supplies remaining, we’ll prompt you to approve a reorder through the XXXXX<sup>®</sup></span></span><span style="font-size:1em"><span style="font-family:arial,helvetica neue,helvetica,sans-serif"> blood glucose meter. All you have to do is say “YES” and we’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’ve taken if you’re using the pedometer function on XXXXX<sup>®</sup>.</span></span></li>
我正在使用 MailChimp 处理 HTML 电子邮件。在电子邮件中,我有两个单独的无组织列表,它们之间有一个中断。
电子邮件在 Gmail 和 Mail (Mac) 中看起来不错,但在 Outlook 中间距真的很奇怪。我最初使用了 break 并且 space 非常宽。然后我使用了一个 <p>
标签,它在 Gmail 和 Mail 中看起来很棒,但在 Outlook 中两个列表之间没有任何 space。
这是使用的代码:
<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’ve checked your blood glucose in a day and how many strips you have left. What’s really cool is when you only have 10 days of supplies remaining, we’ll prompt you to approve a reorder through the XXXXX<sup>®</sup></span></span><span style="font-size:16px"><span style="font-family:arial,helvetica neue,helvetica,sans-serif"> blood glucose meter. All you have to do is say “YES” and we’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’ve taken if you’re using the pedometer function on XXXXX<sup>®</sup>.</span></span></li>
放在这里看起来很正常,但在Outlook中间距是2英寸。关于如何解决我的 UL 间距问题有什么建议吗?
你可以使用 margin: top right bottom left 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’ve checked your blood glucose in a day and how many strips you have left. What’s really cool is when you only have 10 days of supplies remaining, we’ll prompt you to approve a reorder through the XXXXX<sup>®</sup></span></span><span style="font-size:16px"><span style="font-family:arial,helvetica neue,helvetica,sans-serif"> blood glucose meter. All you have to do is say “YES” and we’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’ve taken if you’re using the pedometer function on XXXXX<sup>®</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’ve checked your blood glucose in a day and how many strips you have left. What’s really cool is when you only have 10 days of supplies remaining, we’ll prompt you to approve a reorder through the XXXXX<sup>®</sup></span></span><span style="font-size:1em"><span style="font-family:arial,helvetica neue,helvetica,sans-serif"> blood glucose meter. All you have to do is say “YES” and we’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’ve taken if you’re using the pedometer function on XXXXX<sup>®</sup>.</span></span></li>