Question

我想让我的整个div可点击，所以我改变了div中链接的样式，所以它需要整个div的大小。但是当我向div添加填充时，背景会扩展，但我的链接不会。

这就是我所拥有的：

html：

<div id="b_register">
<a href="#"> Register </a>
</div>

css：

#b_register {
    background-color: #CCCCCC;
    display: block;
    float: left;
    font-size: 16px;
    height: 20px;
    margin-bottom: 5px;
    margin-right: 5px;
    padding: 10px;
    text-align: center;
    width: 110px;
}


#b_register a {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
    color:white;
}

#b_register:hover{
    background-color: #009FD6;
}

或者你也可以去那里 http://jsfiddle.net/EycDQ/1/

我想要的是即使使用填充也可以使div可点击，并且不使用div上的任何Onclick事件。

谢谢！

Answer 1

可以将背景颜色，悬停效果和填充移动到锚标记而不是div元素？

锚点只有他们的文本可以点击，除非他们有某种背景，或使用填充来扩展可点击区域。间隔gifs（1px xpp透明.gifs）用于此目的需要透明的项目，如果由于某种原因div必须具有背景颜色/悬停效果。

我修改了你的小提琴，只改变了以下内容：

#b_register a {
    background-color: #CCCCCC;
    padding: 10px;
    }

    #b_register a:hover{
    background-color: #009FD6;
    }

http://jsfiddle.net/EycDQ/9/

Answer 2

为什么不将<a>标记放在<div>周围而不是其他方式？

<a href="#">
  <div id="b_register">
     Register
  </div>
</a>

Answer 3

我认为您应该在标签中添加填充并调整div大小。

#b_register a {
    padding:10px;
}

这是一个小提琴：

http://jsfiddle.net/EycDQ/7/

Answer 4

如果您想要做的事情很简单，只需将事件onclick添加到您的div，然后使用window.location = "Your_URL";更改位置

#b_register{cursor: pointer;}

<div id="b_register" onclick="window.location='google.com'">Register</div>

div可点击填充

4 个答案: