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>

Answer 2

我认为问题在于p标记位于div内，但您将背景图像应用于div，但是p中的链接。 p也有填充。

简而言之，尝试在一个标签中完成所有操作。

编辑：像@Sjoerd说：使用a标记。

Answer 3

你真的不需要p标签。将所有内容应用于div，我认为你应该没问题。我真的会将点击应用到一个href，但是如果没有JS或搜索引擎的人那么你也可以有一个后备。

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

在这种情况下，将按钮属性应用于标签。

Answer 4

制作＆lt; a＆gt; as display：block 并将其填充为类似

的内容

填充：5px 5px 5px 5px;

这会增加链接的点击区域

Answer 5

尝试仅使用“a href”标记，然后为其添加填充和背景。填充：5px 5px;背景：灰色;这看起来像一个按钮，可以点击。

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

5 个答案: