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/

<强>更新

看到这个小提琴的活跃＆amp;添加了悬停的CSS版本，因此它显示按钮被悬停并单击，您的初始CSS使它成为按钮看起来不像是被点击但是它是。

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

Answer 2

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

<强>更新：

问题是你的输入类型=“文本”和提交按钮的td是重叠的还是位于提交的顶部。您应该将第二个td分成两个td，并在一个td中输入类型文本，在另一个td中提交按钮。

填充禁用提交按钮

2 个答案: