Question

我有一个非常简单的问题。每当我用一对锚标签包围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;
}

Answer 1

Codepen http://codepen.io/noobskie/pen/bVVdaP

您需要做的就是在div中添加一个链接并将其添加到a

上的css中

a{
  display:inline-block;
  width:100%;
  height:100%;
}

这将确保链接在divs width + height内完全展开。

如果您希望链接位于div之外，我的建议是将其设置为固定宽度，然后您可以将其调整为div的大小（响应的百分比）

关于在div周围包装标签的一些信息

Is putting a div inside an anchor ever correct?

取决于您正在适应的HTML版本：



[HTML 4.01] [1] 指定<a>元素只能包含[内联元素] [3]。 <div>是[块元素] [2]，所以它可能不是   出现在<a>内。

当然，你可以自由地设计一个内联元素   出现是一个块，或者确实是一个块的样式，以便它以内联方式呈现。在HTML中使用术语inline和block   指元素与语义结构的关系   该文档，而CSS中的相同术语更多地与   视觉造型的元素。如果您显示内联元素   一种块状的方式，这很好。

但是你应该确保文档的结构仍然存在   当CSS不存在时有意义，例如当通过一个CSS访问时   辅助技术，如屏幕阅读器 - 或者实际上在检查时   强大的Googlebot。



[HTML 5] [4] 声明<a>元素＆＃34;可以包裹整个段落，列表，表格等等，甚至整个   部分，只要其中没有交互式内容（例如   按钮或其他链接）＆＃34;。

[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

Div Anchor Clickable甚至在Div之外

1 个答案: