Zurb 中的左对齐社交媒体图标答案

【问题标题】：Left Aligned Social Media Icons in ZurbZurb 中的左对齐社交媒体图标
【发布时间】：2017-08-10 22:32:26
【问题描述】：

我正在使用 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 基金会的解决方案。

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

【问题讨论】：

标签： zurb-foundation html-email

【解决方案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% 的宽度（它使表格居中），向表格添加左对齐，它就像一个魅力。让我知道这是否适合您。

【讨论】：

【解决方案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>

然后在你的sass中：

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

【讨论】：