Question

我使用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 Foundation合作的解决方案我只是忽略了。

https://jsfiddle.net/wallyglenn/fqs9qcLe/

Answer 1

我认为这就是你可能会追求的。我不使用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％的宽度（它使桌子居中），将左对齐添加到表格中，它就像一个魅力。如果这对您有用，请告诉我。

Answer 2

我发现这是因为菜单元素似乎具有固定的宽度。
您可以使用菜单元素上的类来解决它。

<row class="collapse">
    <menu class="menu-width-auto">
        <item href="#"><img src="img-path/instagram.png"></item>
        <item href="#"><img src="img-path/facebook-f.png"></item>
        <item href="#"><img src="img-path/pinterest-p.png"></item>
        <item href="#"><img src="img-path/twitter.png"></item>
    </menu>
</row>

然后放开你的屁股：

table {
  &.menu {
    &.menu-width-auto {
      width: auto;
    }
  }
}

在Zurb左对齐社交媒体图标

2 个答案: