<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" 标签本质上只是一个超链接。所以从逻辑上讲，你会把 "a" 标签放在 div 中，导致这样的事情：

<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 类。以后你会感谢我的。

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

<a> hyperlink with div inside is to large / wide

html

tags

margin

hyperlink