0

表のセル内に簡単な検索フォームを作成したい:

 <td style="vertical-align: center">
   <div id="search">
       <form action="search" method="get">
         Search:
         <input type="text" value="enter something" class="autoempty" />
         <button type="submit"></button>
       </form>
   </div>
 </td>

ボタンには、次の CSS を使用して検索アイコンがあるはずです。

div#search button {
  /*reset the normal button behavior*/
  padding: 0px;
  border-width: 0px;
  border-style: none;
  background-color: transparent;
  /*Make it square*/
  width: 30px;
  height: 30px;
  /*set background*/
  background-image: url("../images/search_grey.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  /*fancy cursor*/
  cursor: pointer;
}

これは次のようになります。
ここに画像の説明を入力

色は、Firebug によって表示される要素の寸法を示しています。水色が<td>エレメントです。
プロパティがそれを修正することを望みvertical-alignましたが、そうではありませんでした。<img>テキストにタグを追加する際にも同じ問題がありました。

4

2 に答える 2

1

これを CSS に追加します

#search button, #serach input
{
    display: inline-block;
    vertical-align: middle;
}

働くフィドル

于 2013-09-26T20:20:27.287 に答える