CSS按钮不可点击全部

问题描述：

请输入一些随机数据并点击按钮的边缘以提交。

问题：我不能点击边缘上的按钮。

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

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

我使用该按钮的代码是

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

感谢，并有一个美好的一天

答

你使用什么库/框架来生成表单？您发布的代码并不能告诉我们有关生成的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; 
}

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

现在，您不想将这些值再次硬编码到按钮，您想将此按钮设置为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; 
}

应该这样做。干杯。

答

设置宽度和高度submit_input CSS类属性100％

CSS按钮不可点击全部

相关推荐