mjml 可点击按钮，不仅仅是按钮内的文字答案

【问题标题】：mjml Clickable button, not just the text inside the buttonmjml 可点击按钮，不仅仅是按钮内的文字
【发布时间】：2020-08-19 10:39:12
【问题描述】：

我有这个基本代码来在 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/ 实时测试代码

【问题讨论】：

标签： html mjml

【解决方案1】：

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 支持。

【讨论】：

【解决方案2】：

不要使用百分比来增加宽度使用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>

【讨论】：