首页 文章

在Zurb左对齐社交媒体图标

提问于
浏览
0

我正在使用Zurb Foundation for Email 2,并且很难让社交媒体图标左对齐 . 我正在寻找一个适用于这种环境的解决方案 .

如果您使用drip.html模板中的此代码,您将在页面上获得五个图标 .

<row class="collapsed footer">
  <columns>
    <center>
      <menu>
        <item><img src="http://placehold.it/25/663399" alt=""></item>
        <item><img src="http://placehold.it/25/663399" alt=""></item>
        <item><img src="http://placehold.it/25/663399" alt=""></item>
        <item><img src="http://placehold.it/25/663399" alt=""></item>
        <item><img src="http://placehold.it/25/663399" alt=""></item>
      </menu>
    </center>
  </columns>
</row>

我知道很多电子邮件客户端都不支持这两个标签 . 我想补充一点,一旦你用Zurb运行构建代码, <menu><item> 标签会自动换出表格 .

如果删除 <center> 标记,则图标会分布在页面的宽度上 .

<table class="menu" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%">
  <tbody><tr style="font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-size: 12px; padding: 0; text-align: center; vertical-align: top">
    <td style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; Margin-bottom: 10px; border-collapse: collapse !important; color: #000000; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-size: 12px; font-weight: 300; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; text-align: center; vertical-align: top; word-wrap: break-word">
      <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%">
      <tbody><tr style="font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-size: 12px; padding: 0; text-align: center; vertical-align: top">
        <th class="menu-item float-center" style="Margin: 0; Margin-bottom: 10px; color: #000000; float: none; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-size: 12px; font-weight: 300; line-height: 1.3; margin: 0; padding: 10px; padding-right: 10px; text-align: center"><a href="undefined" style="Margin: 0; Margin-bottom: 10px; color: #2199e8; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-weight: 300; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none"><img src="http://placehold.it/25/663399" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto"></a></th>
        <th class="menu-item float-center" style="Margin: 0; Margin-bottom: 10px; color: #000000; float: none; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-size: 12px; font-weight: 300; line-height: 1.3; margin: 0; padding: 10px; padding-right: 10px; text-align: center"><a href="undefined" style="Margin: 0; Margin-bottom: 10px; color: #2199e8; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-weight: 300; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none"><img src="http://placehold.it/25/663399" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto"></a></th>
        <th class="menu-item float-center" style="Margin: 0; Margin-bottom: 10px; color: #000000; float: none; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-size: 12px; font-weight: 300; line-height: 1.3; margin: 0; padding: 10px; padding-right: 10px; text-align: center"><a href="undefined" style="Margin: 0; Margin-bottom: 10px; color: #2199e8; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-weight: 300; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none"><img src="http://placehold.it/25/663399" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto"></a></th>
        <th class="menu-item float-center" style="Margin: 0; Margin-bottom: 10px; color: #000000; float: none; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-size: 12px; font-weight: 300; line-height: 1.3; margin: 0; padding: 10px; padding-right: 10px; text-align: center"><a href="undefined" style="Margin: 0; Margin-bottom: 10px; color: #2199e8; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-weight: 300; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none"><img src="http://placehold.it/25/663399" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto"></a></th>
      <th class="menu-item float-center" style="Margin: 0; Margin-bottom: 10px; color: #000000; float: none; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-size: 12px; font-weight: 300; line-height: 1.3; margin: 0; padding: 10px; padding-right: 10px; text-align: center"><a href="undefined" style="Margin: 0; Margin-bottom: 10px; color: #2199e8; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-weight: 300; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none"><img src="http://placehold.it/25/663399" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto"></a></th>
      </tr></tbody>
      </table>
    </td>
  </tr></tbody>
</table>

我已经尝试过试验代码,但我无法让图标向左冲洗并且看起来很棒 . 如果你用一个简单的表替换它,你会得到类似的效果,因为为Zurb编写的所有样式,所以这成为一个非常好的修复 .

我想知道是否有一个与Zurb基金会合作的解决方案我只是忽略了 .

1 回答

  • 0

    我想这就是你可能会追求的 . 我不使用Zurb,但可以为您提供可以使其工作的HTML .

    <table align="left" class="menu" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top;">
      <tbody><tr style="font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-size: 12px; padding: 0; text-align: center; vertical-align: top">
        <td style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; Margin-bottom: 10px; border-collapse: collapse !important; color: #000000; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-size: 12px; font-weight: 300; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; text-align: center; vertical-align: top; word-wrap: break-word">
          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%">
          <tbody><tr style="font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-size: 12px; padding: 0; text-align: center; vertical-align: top">
            <th class="menu-item float-center" style="Margin: 0; Margin-bottom: 10px; color: #000000; float: none; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-size: 12px; font-weight: 300; line-height: 1.3; margin: 0; padding: 10px; padding-right: 10px; text-align: center"><a href="undefined" style="Margin: 0; Margin-bottom: 10px; color: #2199e8; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-weight: 300; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none"><img src="http://placehold.it/25/663399" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto"></a></th>
            <th class="menu-item float-center" style="Margin: 0; Margin-bottom: 10px; color: #000000; float: none; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-size: 12px; font-weight: 300; line-height: 1.3; margin: 0; padding: 10px; padding-right: 10px; text-align: center"><a href="undefined" style="Margin: 0; Margin-bottom: 10px; color: #2199e8; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-weight: 300; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none"><img src="http://placehold.it/25/663399" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto"></a></th>
            <th class="menu-item float-center" style="Margin: 0; Margin-bottom: 10px; color: #000000; float: none; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-size: 12px; font-weight: 300; line-height: 1.3; margin: 0; padding: 10px; padding-right: 10px; text-align: center"><a href="undefined" style="Margin: 0; Margin-bottom: 10px; color: #2199e8; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-weight: 300; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none"><img src="http://placehold.it/25/663399" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto"></a></th>
            <th class="menu-item float-center" style="Margin: 0; Margin-bottom: 10px; color: #000000; float: none; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-size: 12px; font-weight: 300; line-height: 1.3; margin: 0; padding: 10px; padding-right: 10px; text-align: center"><a href="undefined" style="Margin: 0; Margin-bottom: 10px; color: #2199e8; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-weight: 300; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none"><img src="http://placehold.it/25/663399" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto"></a></th>
          <th class="menu-item float-center" style="Margin: 0; Margin-bottom: 10px; color: #000000; float: none; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-size: 12px; font-weight: 300; line-height: 1.3; margin: 0; padding: 10px; padding-right: 10px; text-align: center"><a href="undefined" style="Margin: 0; Margin-bottom: 10px; color: #2199e8; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-weight: 300; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none"><img src="http://placehold.it/25/663399" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto"></a></th>
          </tr></tbody>
          </table>
        </td>
      </tr></tbody>
    </table>
    

    我对你的HTML所做的是删除100%的宽度(它使 table 居中),将左对齐添加到表格中它就像一个魅力 . 如果这对您有用,请告诉我 .

相关问题