Question

我正在使用带有两列的容器的Zurb Ink 6电子邮件基础。左栏为text-align: left，右栏为text-align: right。

在我内联代码之前它看起来很好。一旦我内联，我就无法在右栏中看到“查看此电子邮件...”右对齐。

问题是table，tr，th的输出会增加text-align:left。有没有办法在我的代码中克服这一点，所以Zurb inliner知道我希望它强迫一个权利？问题是Zurb-Ink放入表格，我无法让这些表格获取我的自定义类.text-right。

输出图片：

内嵌之前的代码：

<container>
  <row style="padding-left: 0px !important;">
    <columns large="8" class="left header" style="padding-left: 0px !important;">
      <a href="http://mysebsite.com" target="_blank"><img class="deltalogo" style="display: block" border="0" alt="Delta Dental Insurance Home" src="http://mysebsite.com/logo.png" width="184" height="45"></a>
    </columns>
    <columns large="4" class="hide-for-small right header text-right" style="text-align: right !important; padding-right: 0; padding-top: 0 !important;">
      <p class="hide-for-small text-right right" style="padding-top: 0 !important; margin: 0; text-align: right !important;"><a style="font-size: 12px; text-decoration: underline; word-break: keep-all; color: #432a6f; line-height: 12px; text-align: right !important;" href="mywebsite.com" target="_blank">View this email on the web</a></p>
    </columns>
  </row>
</container>

CSS：

.text-right {
  text-align: right !important;
  padding-top: 0px !important; }

th.text-right {
  padding: 0;
  vertical-align: top;
  text-align: right; }

输出：

<table style="border-collapse:collapse;border-spacing:0;display:table;padding:0;padding-left:0!important;position:relative;text-align:left;vertical-align:top;width:100%" class="row">
<tbody>
    <tr style="padding:0;text-align:left;vertical-align:top">
        <th class="left header small-12 large-8 columns first" style="Margin:0 auto;background:#fff;color:#000;font-family:'Gotham SSm A','Gotham SSm B',Arial,sans-serif;font-size:14px;font-weight:300;line-height:1.3;margin:0 auto;padding:0;padding-bottom:0;padding-left:0!important;padding-right:8px;text-align:left;width:370.67px">
            <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
                <tr style="padding:0;text-align:left;vertical-align:top">
                    <th style="Margin:0;color:#000;font-family:'Gotham SSm A','Gotham SSm B',Arial,sans-serif;font-size:14px;font-weight:300;line-height:1.3;margin:0;padding:0;text-align:left">
                        <a href="http://mysebsite.com" target="_blank" style="Margin:0;color:#000;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 class="logo" style="-ms-interpolation-mode:bicubic;border:none;clear:both;display:block;max-width:100%;outline:0;text-decoration:none;width:auto" border="0" alt="Home" src="http://mysebsite.com/logo.png" width="184" height="45">
                        </a>
                    </th>
                </tr>
            </table>
        </th>
        <th class="hide-for-small right header text-right small-12 large-4 columns last" style="Margin:0 auto;background:#fff;color:#000;font-family:'Gotham SSm A','Gotham SSm B',Arial,sans-serif;font-size:14px;font-weight:300;line-height:1.3;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0!important;text-align:right!important;vertical-align:top;width:177.33px">
            <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
                <tr style="padding:0;text-align:left;vertical-align:top">
                    <th style="Margin:0;color:#000;font-family:'Gotham SSm A','Gotham SSm B',Arial,sans-serif;font-size:14px;font-weight:300;line-height:1.3;margin:0;padding:0;text-align:left">
                        <p class="hide-for-small text-right right" style="Margin:0;Margin-bottom:10px;color:#000;font-family:'Gotham SSm A','Gotham SSm B',Arial,sans-serif;font-size:14px;font-weight:300;line-height:1.3;margin:0;margin-bottom:10px;padding:0;padding-top:0!important;text-align:right!important"><a style="Margin:0;color:#432a6f;font-family:'Gotham SSm A','Gotham SSm B',Arial,sans-serif;font-size:12px;font-weight:300;line-height:12px;margin:0;padding:0;text-align:right!important;text-decoration:underline;word-break:keep-all" href="http://mysebsite.com" target="_blank">View this email on the web</a>
                        </p>
                    </th>
                </tr>
            </table>
        </th>
    </tr>
</tbody>
</table>

Zurb-ink，强制文本对齐：右

0 个答案: