Question

我制作了一个简单的html片段，其中包含：

<a href="#"><div>Something here</div></a>

它显然提醒我div不能在<a>标记内。我使用了div，因为我希望整个盒子（在这种情况下为div）是一个按钮。因此，子类:hover和适当的按钮区域适用于整个框，而不仅仅是文本内部。据我所知，div可用于html5中的标签内。我使用XHTML 1.0 Transitional。有什么我可以替换div以避免代码中的错误？或者我应该将xhtml更改为html5？如果不触及剩下的代码，它会运行良好吗？谢谢。

Answer 1

您可以使用display:block。

一个例子如下：

HTML：

<a href="#" class="btn">Button</a>

CSS：

a.btn{
    display: block;
    background-color: Green;
    width: 50px;
    height: 25px;
    text-align: center;
    text-decoration: none;
    color: White;
}
a.btn:hover{
    background-color: lightGreen;
    color: Black;
}

您可以在此处进行实时测试：http://jsfiddle.net/YdCzY/

Answer 2

您可以尝试在'a'元素中使用'span'元素而不是div ...

您可以将样式应用于范围，使其行为与您想要的div一样（例如，丰富的内容也是一个完整的链接）。

AFAICS，span和div之间的唯一区别是默认样式，以及允许它们成为子项的元素。但是我愿意被更多有学问的贡献者纠正......

Answer 3

使用

<div onclick="..">...</div>

或a-tag（http://green-beast.com/blog/?p=74）

上的display: block;

Answer 4

尝试使用：

<强> HTML：

<a id="block-a" href="#">Something here</a>

<强> CSS：

#block-a {
    display: block;
}

Answer 5

至少

更容易

`<div onclik="window.location.href='url'">
</div>`

在<a></a> </div>中的<div>

5 个答案: