用样式创建 <a href...> 的 HTML答案

【问题标题】：HTML creating <a href...> with style用样式创建 <a href...> 的 HTML
【发布时间】：2017-12-15 04:12:40
【问题描述】：

我创建了一个看起来像这样的按钮的链接：

<a target='_blank' href="mailto:me@myemail.com?Subject=bla bla" style='background:#44ff22;color:#ffffff;font-size:15px;padding:8px 12px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;text-decoration:none;'>Email Me</a>

问题是可点击区域不是整个框（它位于“按钮”的顶部三分之一部分），因此人们可能会认为它不起作用

如何创建可点击的矩形区域？

【问题讨论】：

你能贴出你的代码吗？
裸露mailto: 链接不是好的做法。垃圾邮件机器人可能会抓取该电子邮件地址，这些垃圾邮件机器人会爬网寻找电子邮件地址。
@Ihazkode 你是对的，但这不是我目前要解决的问题；）

标签： html css href

【解决方案1】：

何必呢？只需将标签放在按钮周围

<a><button></button></a>

【讨论】：

如果您需要，您可以随时修改按钮的外观
既然可以用简单的 CSS 实现，为什么还要添加额外的元素？
@KalpeshPatel 是的 - 因为 HTML 元素不是用来使用的 - 你应该用 10 行 CSS 代码替换它们
我也试过这个选项，但它根本不起作用 = 0 可点击区域：<button onclick="location.href='mailto:me@myemail.com?Subject=bla bla' style='background:#44ff22;color:#ffffff;font-size:15px;padding:8px 12px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;text-decoration:none;'>Email Me</button>
@KukulaMula 将按钮放在“a”标签中并仅将属性添加到“a”标签

【解决方案2】：

将display: block 或display: inline-block 属性添加到您的样式中。

a {
  background:#44ff22;
  color:#ffffff;
  font-size:15px;
  padding:8px 12px;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  text-decoration:none;
  
  display: block; /* Added */
}

&lt;a target='_blank' href="mailto:me@myemail.com?Subject=bla bla"&gt;Email Me&lt;/a&gt;

a {
  background:#44ff22;
  color:#ffffff;
  font-size:15px;
  padding:8px 12px;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  text-decoration:none;
  
  display: inline-block; /* Added */
}

&lt;a target='_blank' href="mailto:me@myemail.com?Subject=bla bla"&gt;Email Me&lt;/a&gt;

【讨论】：

我没有做任何改变，可点击区域保持不变（我还清理了缓存以确保它重新加载新鲜）