如何避免display：html样式属性中的inline-block

时间：2019-05-13 15:07:42

标签： html css email

我正在策划一个每两周一次的newsticker。为了使读者对主题有更好的了解，我提供了一个标记每个新闻项目的系统。在新闻贴纸的顶部，有一个面板，其中包含指向带有任何给定标签的所有新闻的链接。

应该看起来像这样all the entries are arrange consecutive in one line until max-width is hit. Then the entries continue in the next line

对于大多数邮件客户端来说，确实的确是这样。但是，在Outlook 2013（可能还有其他版本）中，它看起来像这样

After each TopicXY a new line is started.

我已经调查了这个问题，发现这是由于MS Outlook忽略了display:inline-block中的style（与其他邮件客户端不同）。

我需要的是Outlook的解决方法，但是我已经没有足够的想法了。某些使用表格的解决方案不能提供我所需的灵活性（即在手机上查看新闻贴时，屏幕宽度通常是限制因素，而不是最大宽度）。我刚刚从网上选择的其他解决方案（即使用float: left）对我不起作用。

下面您可以找到一个最小的（不是）工作示例。

任何可以解决这个问题的想法都会受到赞赏。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type"
      content="text/html; charset=UTF-8" />
    <title>My Newsletter</title>
    <meta name="viewport"
      content="width=device-width, initial-scale=1.0" />
</head>
<body style="margin: 0; padding: 0;">
    <table border="0"
      cellpadding="0"
      cellspacing="0"
      width="100%"
      style="max-width:680px">
        <tr> <!-- Tags-Index start -->
          <td style="color: #B6C828;">
            <span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic1<br/><font size="5"> <a href="#news_item_2" style="color:#B6C828;text-decoration: none">▪</a>  <a href="#news_item_7" style="color:#B6C828;text-decoration: none">▪</a>  <a href="#news_item_11" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic2<br/><font size="5"> <a href="#news_item_2" style="color:#B6C828;text-decoration: none">▪</a>  <a href="#news_item_14" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic3<br/><font size="5"> <a href="#news_item_5" style="color:#B6C828;text-decoration: none">▪</a>  <a href="#news_item_8" style="color:#B6C828;text-decoration: none">▪</a>  <a href="#news_item_12" style="color:#B6C828;text-decoration: none">▪</a>  <a href="#news_item_13" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic4<br/><font size="5"> <a href="#news_item_5" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic5<br/><font size="5"> <a href="#news_item_0" style="color:#B6C828;text-decoration: none">▪</a>  <a href="#news_item_23" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic6<br/><font size="5"> <a href="#news_item_14" style="color:#B6C828;text-decoration: none">▪</a>  <a href="#news_item_18" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic7<br/><font size="5"> <a href="#news_item_1" style="color:#B6C828;text-decoration: none">▪</a>  <a href="#news_item_3" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic8<br/><font size="5"> <a href="#news_item_9" style="color:#B6C828;text-decoration: none">▪</a>  <a href="#news_item_13" style="color:#B6C828;text-decoration: none">▪</a>  <a href="#news_item_28" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic9<br/><font size="5"> <a href="#news_item_22" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic10<br/><font size="5"> <a href="#news_item_9" style="color:#B6C828;text-decoration: none">▪</a>  <a href="#news_item_24" style="color:#B6C828;text-decoration: none">▪</a>  <a href="#news_item_27" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic11<br/><font size="5"> <a href="#news_item_2" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic12<br/><font size="5"> <a href="#news_item_7" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic13<br/><font size="5"> <a href="#news_item_4" style="color:#B6C828;text-decoration: none">▪</a>  <a href="#news_item_20" style="color:#B6C828;text-decoration: none">▪</a>  <a href="#news_item_21" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic14<br/><font size="5"> <a href="#news_item_5" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic15<br/><font size="5"> <a href="#news_item_0" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic16<br/><font size="5"> <a href="#news_item_10" style="color:#B6C828;text-decoration: none">▪</a>  <a href="#news_item_12" style="color:#B6C828;text-decoration: none">▪</a>  <a href="#news_item_14" style="color:#B6C828;text-decoration: none">▪</a>  <a href="#news_item_18" style="color:#B6C828;text-decoration: none">▪</a>  <a href="#news_item_25" style="color:#B6C828;text-decoration: none">▪</a>  <a href="#news_item_26" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic17<br/><font size="5"> <a href="#news_item_1" style="color:#B6C828;text-decoration: none">▪</a>  <a href="#news_item_16" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic18<br/><font size="5"> <a href="#news_item_19" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic20<br/><font size="5"> <a href="#news_item_27" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic21<br/><font size="5"> <a href="#news_item_11" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic22<br/><font size="5"> <a href="#news_item_16" style="color:#B6C828;text-decoration: none">▪</a>  <a href="#news_item_17" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic23<br/><font size="5"> <a href="#news_item_3" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic24<br/><font size="5"> <a href="#news_item_15" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic25<br/><font size="5"> <a href="#news_item_25" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic26<br/><font size="5"> <a href="#news_item_8" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic27<br/><font size="5"> <a href="#news_item_6" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic28<br/><font size="5"> <a href="#news_item_24" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
            |<span style="vertical-align: middle; display: inline-block; padding: 0px 3px 0px 3px; text-align:center; color: #B6C828; font-family: Arial, sans-serif; font-size: 8px; line-height: 10px;">Topic29<br/><font size="5"> <a href="#news_item_28" style="color:#B6C828;text-decoration: none">▪</a> </font></span>
          </td>
        </tr> <!-- Tags-Index start -->
    </table>
</body>

0 个答案:

没有答案
相关问题
最新问题