<a> doesn&#39;t work within a <div></div></a>

Question

我有一个带有三种状态的按钮（三个不同的图像），除了按钮的主要功能外，它看起来很棒 - 链接到其他文档：）

单击时，没有任何反应。我是否需要使用javascript或<input>或<button>？

我已尝试使用<button>标记，但这三个状态无效。

并且<a id="backbutton"> ...也不起作用。

#backbutton{ width: 100px; height:100px; background-image: url('../obrazky/fs/back_up100.png'); }
#backbutton:hover{ background-image: url('../obrazky/fs/back_hover100.png'); }
#backbutton:active{ background-image: url('../obrazky/fs/back_down100.png'); }


<div id="backbutton"><a href="index.html"></a></div>

Answer 1

使用

#backbutton a{display:block;width:100%;height:100%;}

使div内的链接适合其容器..

Answer 2

最简单（以及最干净的）方式是不在其中包含div，只需将display: block;放在链接上即可。这将使它成为一个块元素，因此，表现得像div那样。

<a id="backbutton" href="index.html"></a>

到CSS：

#backbutton { display: block; width: 100px; height:100px; ... }

jsFiddle Demo

并回答您的问题：对于链接到其他文档，要使用的正确元素是a，其href属性指向到另一个文件。 button标记和input标记（button，submit，reset）的按钮变体用于定义操作用户可以使用该页面（例如提交表单 - 作为副作用可能会将您带到另一页）。

Answer 3

<div id="backbutton"><a href="index.html"></a></div>

没有什么可点击的！尝试：

<div id="backbutton"><a href="index.html">Go home</a></div>

或者：

<a id="backbutton" href="index.html"></a>

然后添加：

display:inline-block;

到后门课程。

Answer 4

a标记内没有任何内容。坚持<span style="width:100%">或类似的东西。

编辑：Gaby是对的，this isn't a portable solution。其他一些内联项目。一个不可见的img？

Answer 5

尝试添加以下CSS：

#backbutton a { width: 100%; height: 100%; margin: 0; padding: 0; }

问题是<a>标记是实际的可推送链接，没有任何内容，因此不会占用任何空间，因此无处可点击。我相信这个CSS会将它扩展到div#backbutton的完整大小。