css - 填充禁用提交按钮

Question

以下是提交按钮的 HTML 代码:

<div id="header">
     <table>
        <tr>
            <td><h1></h1></td>
            <td><input type="text" name="search" class="search"/>
             <input type="submit" class="search-btn" name="submit" value="Search"/></td>                        
        </tr>
      </table>
</div>

下面是我的 CSS:

#header table td .search-btn{width: 60px; margin-left: 5px;                                                          
                             border: 1px solid #D5EA3B;
                             padding: 9px;
                             display: inline-block;
}

问题是当我尝试添加填充时它会禁用提交按钮(不可点击)，如果我要删除填充然后它会启用它(可点击)。这真是一个奇怪的问题。我不明白这是怎么回事。

如有任何帮助，我们将不胜感激。

Answer 1

好的。

首先，您粘贴的 CSS 不太正确，删除#header 表等。

.search-btn{width: 60px; margin-left: 5px;                                                          
                             border: 1px solid #D5EA3B;
                             padding: 9px;
                             display: inline-block;
}

因此，填充不是问题，边框才是问题，使它看起来没有点击。如果您访问:http://jsfiddle.net/3w4e5/2/您会看到该按钮按预期工作，但是当您重新添加边框时似乎已损坏。

您还需要创建按钮的悬停和事件版本:

参见:http://jsfiddle.net/3w4e5/3/

更新:

请参阅此 fiddle 以获取添加的事件和悬停 CSS 版本，以便它显示按钮已悬停并单击，您的初始 CSS 使按钮看起来不像被单击，但它确实被单击了。

http://jsfiddle.net/3w4e5/4/