Question

我在div中有一些文本链接，并希望使整个div可以点击。当我这样做时，我失去了我为textlinks添加的所有风格。用css做这个最好的方法是什么？

欢迎所有建议！

左侧的列通过使整个div可点击，使第一个链接可单击。右边的3列不可点击，但具有应该具有的样式。

Answer 1

虽然@Mr.Ross的答案将在某些浏览器中起作用，但它被视为不良做法，并且在技术上违反了W3C指南。

您可以使用javascript或者您可以尝试下面的内容（我发现这可以在我的某些网站上使用）：

<div>
    <a href="aLink.html" style="width:100%;height:100%;display:block">Your link</a>
</div>

这应该使div（直到填充）的行为类似于链接，但应该保留为链接中的文本指定的任何样式：）

Answer 2

 <a href="adver.html"><div style="width:300px;height:200px;border:5pt double black;background-color:red;float:right;font-weight:bold;text-align:center;vertical-align:center"></div></a>

只需在div之前声明锚点！：）

Answer 3

<强> Demo

HTML

<a class="aFordiv" href="#">
    <div> I am a cliackable div </div>
</a>

CSS

div {
    width: 100px;
    height: 100px;
    background: #aaa;
}

/* reset default styles for the anchor tag for each states */

.aFordiv, .aFordiv:visited, .aFordiv:link, .aFordiv:active, .aFordiv:hover, .aFordiv:focus {
    font-family:Arial;
    color:black;
    text-decoration:none;
    outline: 0;
}

什么是使整个div可点击的最佳方式，但保持当前的风格？

3 个答案: