html - 如何使 <a> 在边框中可点击？答案

【问题标题】：html - how to make <a> clickable in border?html - 如何使 <a> 在边框中可点击？
【发布时间】：2012-09-19 22:03:38
【问题描述】：

说我有一个 <a class="myclass" href="foo.htm">Click Here</a> 在 css 中是这样的：

.myclass
{
border: 2px solid #000;
padding: 1em;
}

所以<a> 看起来像一个按钮，但它仅在单击on 文本时起作用，而不是在整个框中。我怎样才能使该框也“捕获” onClick？

【问题讨论】：

【解决方案1】：

将锚标记包裹在另一个容器元素周围

<a class=".." href=".."><div>Click here</div><a>

【讨论】：

【解决方案2】：

是一个内联，你必须把它转换成一个块，试试这个

.myclass:
{
  display:block;
  border: 2px solid #000;
  padding: 1em;
}

【讨论】：

【解决方案3】：

您需要为您的 a 元素设置 css 属性 display: block 或 inline-block（视情况而定...）。

【讨论】：

【解决方案4】：

我似乎可以点击整个链接。确保在 .myclass 之后删除 :。此外，如果它仍然无法正常工作，您可以尝试添加 display:block;

另外，在 html5 中，您可以将 a 标签包裹在块元素周围。这将在较旧的 html 中有效，尽管它不正确。

.myclass
{
    border: 2px solid #000;
    padding: 1em;
    display:block;
}

【讨论】：

【解决方案5】：

问题是 a 是内联元素，而填充不能像我们期望的内联元素那样工作。将 a's 更改为块级元素，一切都应该按照您的预期工作（注意在 CSS 声明中删除了不应该存在的“：”）：

.myclass {
   display: block;
   border: 2px solid #000;
   padding: 1em;
}

【讨论】：

【解决方案6】：

除非你浮动元素并给它一个固定的宽度，否则块将无法正常工作。我认为“inline-block”会更好。

.myclass{
    display: inline-block;
    border: 2px solid #000;
    padding: 1em;
}

你可以在这里看到它的实际效果：http://jsfiddle.net/2tmzL/

浏览器对 inline-block 的支持非常好：http://caniuse.com/inline-block

【讨论】：