CSS按钮不能全部点击答案

【问题标题】：CSS button not clickable all overCSS按钮不能全部点击
【发布时间】：2011-03-08 23:10:37
【问题描述】：

请查看THIS页面。

请输入一些随机数据，然后点击按钮边缘提交。

问题：我无法点击边缘的按钮。

目标：我想将可点击部分扩展到整个按钮。

我想我必须介绍一下。但我不确定必须在哪里以及如何完成。

我用于按钮的代码是

<?php echo $form->submit('Submit', array('class' => 'submit_input', 'div' => array('class' => 'stndrd_btn', 'style' => 'margin-top:20px;'))); ?>

谢谢，祝你有美好的一天

【问题讨论】：

标签： css button click html

【解决方案1】：

您使用什么库/框架来生成表单？您发布的代码并没有告诉我们太多关于生成的 HTML 的信息。

无论如何。如果您使用 Firebug 或类似的工具检查 DOM，您会看到按钮元素 doesn't cover all the visual space.

查看您的 CSS (global_style.css)，我可以看到此按钮的宽度被硬编码为 131 像素：

.submit_input {
    color:#FFF;
    margin:0 auto;
    text-align:center;
    font-size:14px;
    font-weight:bold;
    background:none;
    border:none;
    width:131px;
    height:22px;
    padding-top:6px;
    cursor:pointer;
}

包裹实际按钮的元素（并显示视觉指针光标和背景图像）的宽度为 140 像素，高度为 30 像素。

现在，您不想再次将这些值硬编码到按钮上，而是想将此按钮设置为 100% 的宽度和高度。如果它是内联元素，这可能不起作用，因此您需要将其display 属性设置为block。将.submit_input 选择器替换为以下内容：

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

应该这样做。干杯。

【讨论】：

【解决方案2】：

将 submit_input css 类中的 width 和 height 属性设置为 100%

【讨论】：