android - 如何防止 HTML 签名中的图像在 iphone 和 Android 上换行？

Question

我需要完成公司电子邮件签名。它在桌面上看起来很棒，但在 iPhone 或 Android 上打开时，图像会换到下一行。它们应该都在同一条线上以产生完整的效果。请参阅下面的代码。

<span style="color: #000000;"><em><span style="color: #808080;"><img class="alignnone size-full wp-image-250" src="https://mtgrecruiter.files.wordpress.com/2016/09/kelley-lobona-051-e1473885068625.jpg" alt="kelley-lobona-05" width="392" height="100" /><img class="alignnone size-full wp-image-251" src="https://mtgrecruiter.files.wordpress.com/2016/09/kelley-lobona-061-e1473885082990.jpg" alt="kelley-lobona-06" width="53" height="100" /><img class="alignnone size-full wp-image-252" src="https://mtgrecruiter.files.wordpress.com/2016/09/kelley-lobona-071-e1473885094151.jpg" alt="kelley-lobona-07" width="48" height="100" /></span></em></span><br />
<em><span style="color: #808080;">p</span></em>: <span style="color: #000000;">713-572-2100 |</span><em><span style="color: #808080;"> c:</span></em> <span style="color: #000000;">770-891-6968 |<span style="color: #808080;"><em> w: </em></span>www.proalt.com</span>

Answer 1

之所以会出现这种效果，是因为外部 span 不够大，无法容纳图像。因此，您可以将 min-width 设置为 de span，以使其与您的三个图像一样大。此外，您应该将 display 属性设置为 block，因为您无法固定内联元素的宽度。

我建议您使用 div 而不是 span。无论如何，这里你有一个工作 example .

诀窍是将其添加到您的跨度中:

min-width:495px;
display:block;