<a> 内部带有 div 的超链接是大/宽

Question

用'a'标签包围一个div会产生奇怪的结果，感觉有必要让'a'标签尽可能宽而不是里面的孩子大小，我把它读作与HTML5有关。

Edge 或多或少地给出了我正在寻找的结果，但在 Chrome 中，出于某种原因，“a”标签是页面的整个宽度。

我还想在 'a' 标记中包含 div 'margin'。所以我不能使用'onclick'方法。这可以在没有javascript的情况下实现吗？ JSFiddle.

<a href="http://example.com" style="background-color: #CCC;">
<div style="width: 100px; height: 100px; background-color: #C00; margin: 0px 8px 8px 0px; display:block;"><h2>text</h2></div>
</a>

<a href="http://example.com" style="background-color: #CCC;">
<div style="width: 100px; height: 100px; background-color: #C00; margin: 0px 8px 8px 0px;"><h2>text</h2></div>
</a>

<a href="http://example.com" style="background-color: #CCC;">
<div style="width: 100px; height: 100px; background-color: #C00; margin: 0px 8px 8px 0px; display:inline-block;"><h2>text</h2></div>
</a>

<a href="http://example.com" style="background-color: #CCC; display: block;">
<div style="width: 100px; height: 100px; background-color: #C00; margin: 0px 8px 8px 0px;"><h2>text</h2></div>
</a>

Answer 1

我立即发现的最简单的解决方法是用另一个“div”标签包围“a”标签，如下所示：

<div style="width: 100px">
    <a href="http://example.com" style="background-color: #CCC;">
        <div style="background-color: #C00; margin: 0px 8px 8px 0px;"><h2>text</h2></div>
    </a>
</div>

但是，您是否有特定的原因希望将“a”标签放置在 div 之外？ div 元素用于启用正确的间距，“a”标签本质上只是一个超链接。所以从逻辑上讲，你会在一个 div 中放置“a”标签，导致这样的结果：

<div style="background-color: #C00; margin: 0px 8px 8px 0px; width: 100px; height: 100px;">
  <a href="http://example.com" style="background-color: #CCC; display: inline-block; width: 100%; height: 100%;">
    <h2>text</h2>
  </a>
</div>

PS：我在这里使用内联 CSS 作为一个简单的例子，但你永远不应该使用它。改用 CSS 类。以后你会感谢我的。