mhu*_*015 0 html css anchor href clickable
我有一个非常简单的问题。每当我用一对锚标记包围一个 div 时，该 div 变得可点击，但由于某种原因，可点击部分超出了 div 本身的尺寸并穿过页面。如何使 div 在其边界内可点击而不是跨页面拉伸？我在这里包含了我的代码。
HTML
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<link rel = "stylesheet" href = "mystyles.css" type = "text/css">
</head>
<body>
<div id = "link"></div>
</body>
</html>
和 CSS
#link {
background-color: #00ccee;
border: solid black 2px;
border-radius: 25px;
width: 150px;
height: 50px;
transition: 1s;
}
#link:hover{
background-color: blue;
width: 160px;
height: 60px;
margin-left: 30px;
}
Codepen http://codepen.io/noobskie/pen/bVVdaP
您所要做的就是在 div 中放置一个链接并将其添加到您的 css 中 a
a{
display:inline-block;
width:100%;
height:100%;
}
这将确保链接在 div 宽度+高度内完全展开。
如果您希望链接位于 div 之外，我的建议是将其设为固定宽度，然后您可以将其调整为 div 的大小（响应的百分比）
这里有一些关于在 div 周围包装标签的信息
根据您要迎合的 HTML 版本：
[HTML 4.01][1]规定
<a>元素只能包含 [内联元素][3]。A<div>是 [块元素][2]，因此它可能不会出现在<a>.当然，您可以自由地设置内联元素的样式，使其 看起来像一个块，或者确实设置一个块的样式，以便将其呈现为内联。HTML中的
inline和术语的使用block指的是元素与文档语义结构的关系，而 CSS 中的相同术语更多地与元素的视觉样式相关。如果您使内联元素以块状方式显示，那很好。但是，当 CSS 不存在时，您应该确保文档的结构仍然有意义，例如当通过辅助技术（如屏幕阅读器）访问时 - 或者实际上在由强大的 Googlebot 检查时。
[HTML 5][4]声明该
<a>元素“可以环绕整个段落、列表、表格等，甚至整个部分，只要其中没有交互内容（例如按钮或其他链接）”。[1]：http : //www.w3.org/TR/html401/struct/links.html#edef-A [2]：http : //www.w3.org/TR/html401/sgml/dtd.html #block [3]：http : //www.w3.org/TR/html401/sgml/dtd.html#inline [4]：http : //www.w3.org/TR/html5/text-level-semantics .html#the-a-element