单击全部按钮时出现问题.CSS按钮

Question

Probem
我有一个CSS按钮,只能单击测试区域.我无法单击按钮的非文本区域.

这是我网站上"编辑"按钮的HTML代码.

<div class="stndrd_btn">
    <p><?php echo $html->link('Edit','... destination....'); ?></p>
</div>

下面是按钮的CSS代码.

.stndrd_btn {
    width:140px;
    height:30px;
    background:url(img/stndrd_btn.png);
    color:#FFF;
    cursor: pointer;

}

.stndrd_btn p {
    color:#FFF;
    margin:0 auto;
    text-align:center;
    vertical-align: middle;
    padding-top:6px;
    font-size:14px;
    font-weight: bold;
    width: 100%;
    height: 100%;
    display: block;
    cursor:pointer;
}

请让我知道如何在整个按钮上点击工作.谢谢!!

Answer 1

制作<a>标签display: block并为其指定宽度和高度,以便按钮完全由<a>元素组成.

<a href="http://www.google.com" style="display: block; width: 300px; height: 200px; background: gold;">Go to Google</a>

或者,您可以为其指定边框,以便文本位于按钮的中间:

<a href="http://www.google.com" style="display: block; width: 300px; border: solid gold 100px; background: gold;">Go to Google</a>