0
我正在使用Zurb基金會用於電子郵件2，並且讓社交媒體圖標難以對齊左側。我正在尋找一種適用於這種環境的解決方案。Zurb中左對齊的社交媒體圖標
如果您使用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基金會合作的解決方案，我剛剛忽略了。