单击整个按钮时出现问题。 CSS 按钮答案

【问题标题】：Problem in clicking button all over it. CSS button单击整个按钮时出现问题。 CSS 按钮
【发布时间】：2011-03-09 23:44:16
【问题描述】：

问题
我有一个 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;
}

请让我知道如何在整个按钮上进行点击。谢谢！！

【问题讨论】：

在 Chrome 上运行良好。您在哪个浏览器上遇到问题？

标签： html css button click

【解决方案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>

【讨论】：

我不推荐内联样式

【解决方案2】：

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

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

编辑：就像@Sjoerd 所说：使用a 标签。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

将 设为 display:block 并将其填充为

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

这会增加链接的点击面积

【讨论】：

【解决方案5】：

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

【讨论】：