使链接/按钮 100% 可点击答案

【问题标题】：Make a link/button 100% clickable使链接/按钮 100% 可点击
【发布时间】：2019-07-12 00:23:45
【问题描述】：

希望有人可以提供帮助。我使用以下代码在 mailchimp 中创建了一个按钮，以允许我在文本框中使用按钮。它看起来很棒，我唯一的问题是按钮中的文本是可点击的，但我希望整个按钮都是可点击的。我已按照此处的建议添加了'display: inline-block'，但似乎没有影响

谁能给点建议？

谢谢

<center>
<table border="0" cellpadding="0" cellspacing="0" style="background-color:#F287B7;" width="60%">
    <tbody>
        <tr>
            <td style="color: rgb(255, 255, 255); font-family: verdana, Arial, sans-serif; font-size: 16px; font-weight: bold; letter-spacing: -0.5px; line-height: 150%; padding: 15px 30px; width: 100%; text-align: center;"><a href="https://www.littlebird.co.uk/membership/join?utm_source=toucan&amp;utm_medium=referral&amp;utm_campaign=toucan15" style="color:#FFFFFF; text-decoration:none;" target="_blank; display: inline-block">Learn More</a></td>
        </tr>
    </tbody>
</table>
</center>

【问题讨论】：

标签： html button mailchimp

【解决方案1】：

你可以用jQuery来做。只需给您的 <td> 元素一个 id 或类。然后用 jQuery 创建一个事件“click”。

<script>
    $(() => {
        $("#clickable").on("click", function () {
            window.open("https://www.littlebird.co.uk/membership/join?utm_source=toucan&amp;utm_medium=referral&amp;utm_campaign=toucan15");
        });
    });
</script>
<center>
    <table border="0" cellpadding="0" cellspacing="0" style="background-color:#F287B7;" width="60%">
        <tbody>
            <tr>
                <td id="clickable"
                    style="cursor: pointer; color: rgb(255, 255, 255); font-family: verdana, Arial, sans-serif; font-size: 16px; font-weight: bold; letter-spacing: -0.5px; line-height: 150%; padding: 15px 30px; width: 100%; text-align: center;">
                    <a href="https://www.littlebird.co.uk/membership/join?utm_source=toucan&amp;utm_medium=referral&amp;utm_campaign=toucan15"
                        style="color:#FFFFFF; text-decoration:none;" target="_blank; display: inline-block">Learn
                        More</a></td>
            </tr>
        </tbody>
    </table>
</center>

你应该导入 jQuery 库。看我在td中添加了style="cursor: pointer;来改变光标。

【讨论】：