Question

我试图通过在div中放置一个锚来创建一个div作为按钮。

HTML

<div class="div1" style="width:300px;">
    <a href="#">hello</a>                        
</div>

CSS

.div1 {
    background-color:red;
    color:white;
    margin:5px;
    border-width:5px;
    border-style:solid;
    padding:10px;
    border-radius:5px;
    text-align:center;
    background: #494949 !important;
}

JSFiddle：http://jsfiddle.net/BzFyS/

我认为它不起作用，因为osomething简单我缺少定位。有什么提示吗？

由于

Answer 1

最简单的方法：添加此css：

.div1 a {
    display: block;
}

就是这样。

如果您希望整个div可点击（包括padding区域）：

.div1 {
    background-color:red;
    color:white;
    margin:5px;
    border-width:5px;
    border-style:solid;
    padding:0px; /* set to 0 */
    border-radius:5px;
    text-align:center;
    background: #494949 !important;
}
.div1 a {
    display: block;
    padding:10px;
}

演示：http://jsfiddle.net/BzFyS/2/

Answer 2

如果您希望整个div可以点击，您可以这样做：

HTML

<div id="div1" style="width:300px;">
    <a href="#">hello</a>                        
</div>

CSS

#div1 {
    background-color:red;
    color:white;
    margin:5px;
    border-width:5px;
    border-style:solid;
    padding:10px;
    border-radius:5px;
    text-align:center;
    background: #494949 !important; /* do you really need that ? */
    cursor: pointer;
}

JavaScript

document.getElementById('div1').onclick=function(){
      // do something
}

但是你真的不需要a元素。

Demonstration

Answer 3

尝试添加到您的CSS：

.div1 a {
    display: block;
}

Answer 4

你必须像这样在div周围放置标签：

<a href="#"><div class="div1" style="width:300px;">
    <p>hello</p>                    
</div></a>

这样可行。

Answer 5

我假设您希望这个div成为“按钮”是吗？

简单的解决方案是使用填充和<a>

来定义display: block;的大小

您仍可以定义<div>的颜色，边距和位置......但可点击区域位于<a>

为什么只有文本可以在这个div中点击？

5 个答案: