2

我有这个基本代码来在 mjml 文档上显示一个按钮链接,它有点工作,但我希望 clicable 区域是整个按钮。

这是代码:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>

        <mj-button href="#" font-family="Helvetica" background-color="black" color="white" padding-top="50px" inner-padding="20px" width="70%">
                    GET YOUR TICKET
                </mj-button>

      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

您可以在https://mjml.io/try-it-live/实时测试代码

4

2 回答 2

0

MJML 团队收到了很多关于您所追求的完全可点击按钮的请求。在版本 4.4.0 (2020-07-30) 中,他们发布了更新和改进的版本。一份文档(确认 AmAn KumAr 的建议)表明当宽度为 px 而不是 % 时,按钮是完全可点击的。

有些人似乎对“完全可点击”的说法提出异议。该团队回应说,当前按钮在各种电子邮件客户端中具有最佳平衡。也就是说,如果他们更改 HTML 以改进一个客户端(可能是 Outlook)的按钮,则该更改会使另一个客户端变得更糟。

如果您没有使用至少 4.4.0,请考虑升级。自 4.4.0 以来的版本包括很大的改进。在 NPM 上可用。当前版本是 4.7.1。MJML 桌面应用程序(我最后一次看到)有 4.6 版本。无论哪种方式都可以帮助您。

顺便说一句:这里没有反对支持,但是在https://slack.mjml.io/上有很多很棒的 MJML 支持这样的问题。

于 2020-10-19T19:30:12.260 回答
-1

不要使用百分比来增加宽度使用 px。

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>

        <mj-button href="#" font-family="Helvetica" background-color="black" color="white" padding-top="50px" inner-padding="20px" width="500px">
          GET YOUR TICKET
        </mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
于 2020-10-12T18:00:08.493 回答