填充禁用提交按鈕

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中提交按鈕。