填充禁用提交按钮

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/

更新：

请参阅此提琴，以了解其中添加了活动和悬浮CSS版本，它表明该按钮已悬浮并单击，您的初始CSS使得按钮看上去不像单击按钮，但实际上是。

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

Answer 2

问题是因为您添加了border: 1px solid #D5EA3B;

更新 ：

问题是您的td包含输入type =“ text”和Submit按钮，它们重叠或位于Submit的顶部。 您应该将第二个td分成两个td，在一个td中输入文本，在另一个td中提交按钮。