Question

请查看THIS页。

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

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

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

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

我用于按钮的代码是

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

谢谢，祝你有个美好的一天

Answer 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;
}

应该这样做。欢呼声。

Answer 2

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

CSS按钮无法全部点击

2 个答案: