Div 即使在 Div 之外也可以点击锚点

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 中放置一个 link，然后将其添加到 a

上的 css

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

这将确保 link 在 div 的宽度+高度内完全展开。

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

这里有一些关于围绕 divs

包装标签的信息

Is putting a div inside an anchor ever correct?

Depending on the version of HTML you're catering to:

[HTML 4.01][1] specifies that <a> elements may only contain [inline elements][3]. A <div> is a [block element][2], so it may not appear inside an <a>.

Of course you are at liberty to style an inline element such that it appears to be a block, or indeed style a block so that it is rendered inline. The use of the terms inline and block in HTML refers to the relationship of the elements to the semantic structure of the document, whereas the same terms in CSS are related more to the visual styling of the elements. If you make inline elements display in a blocky manner, that's fine.

However you should ensure that the structure of the document still makes sense when CSS is not present, for example when accessed via an assistive technology such as a screen reader - or indeed when examined by the mighty Googlebot.

[HTML 5][4] states that the <a> element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)".

[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 即使在 Div 之外也可以点击锚点

Div Anchor Clickable Even Outside of Div

html

css

anchor

href

clickable