0

我正在尝试通过在 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/

我认为它不起作用，因为我在定位方面缺少一些简单的东西。有小费吗？

谢谢

4

5 回答 5

3

最简单的方法：添加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/

于 2013-08-17T16:41:40.477 回答
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元素。

示范

于 2013-08-17T16:40:02.860 回答
1

尝试添加到您的 CSS：

.div1 a {
    display: block;
}
于 2013-08-17T16:42:32.760 回答
0

您必须像这样将标签放在 div 周围：

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

这将起作用。

于 2013-08-17T16:39:58.610 回答
0

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

简单的解决方案是<a>通过使用 padding 和display: block;

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

于 2013-08-17T17:08:16.780 回答