0

以下は、送信ボタンの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;
}

問題は、パディングを追加しようとすると、送信ボタンが無効になり（クリック不可）、パディングを削除する場合は有効になります（クリック可能）。これは本当に奇妙な問題です。私はこれを正確に取得していません。

どんな助けでもいただければ幸いです。

4

2 に答える 2

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/

于 2012-12-10T12:42:30.940 に答える
0

問題は、あなたが追加したからです border: 1px solid #D5EA3B;

更新：

問題は、input type = "text"と送信ボタンを格納するtdが、送信の上に重なっているか、上にあることです。2番目のtdを2つのtdに分割し、1つのtdに入力タイプのテキストを、もう1つのtdに送信ボタンを設定する必要があります。

于 2012-12-10T12:42:19.770 に答える