Question

我在div之外有一个链接，如下例所示：

<a href="http://google.com">
    <div id="Something" style="width:200px; height:100px; display:block; background-color:red; padding:0; margin:0;">
    </div>
</a>

现在，链接可以在div的任何部分上工作，但它也存在于div之外，主要是在它的右侧，没有任何东西。如何修复此问题以使链接仅在div标记内工作？

以下是jsfiddle中的代码：http://jsfiddle.net/BWPHS/

Answer 1

注意，DIV元素默认为display: block，因此DIV中不需要这些元素。你需要做的是使A高度相同，并解决填充和边缘的味道。

<div id="Something" style="width:200px; height:100px; background-color:red; padding:0; margin:0;">
    <a href="http://google.com" style="height: 100px; display:block; padding: 0; margin: 0;"></a>
</div>

http://jsfiddle.net/BWPHS/3/

请注意，正如sdleihssirc所说，HTML5允许它（如果您使用DOCTYPE）。请注意，要解决HTML5的特定问题，您需要将高度和宽度应用于A标记：

<a href="http://google.com" style="width: 200px; height: 100px; display:block; padding: 0; margin: 0; background: blue;">
    <div id="Something" style="height: 100px; background-color: red; padding:0; margin:0;"></div>
</a>

http://jsfiddle.net/BWPHS/2/

并且，正如thirtydot指出的那样，您可以display: inline-block或float: left #something元素并将display: block应用于A，它应该可以完美地用于你：

#something,
#something a {
  padding: 0;
  margin: 0;
}
#something {
  display: inline-block;
  background: red;
}
#something a:link {
  display: block;
  width: 200px;
  height: 100px;
}

<div id="something">
    <a href="http://google.com"></a>
</div>

http://jsfiddle.net/BWPHS/6/

您可能希望避免使用内联style属性。

div标签外的链接包含空白空间

1 个答案: