ボタンを選択ボックスと整列する（HTMLフォーム）

-1

3つの選択ボックス（ドロップダウン）とボタンで構成されるページに検索パネルを作成しようとしています。しかし、私はそれらを整列させることができません。これは何千回も前に行われていたに違いない。ボタンを選択ボックスと整列する（HTMLフォーム）

これを単純化し、何が起こっているのかを理解するために、私は次のミニマリストページを作成しました。

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Untitled Document</title> 
</head> 

<body> 
    <table> 
     <tr> 
      <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post" name="search1" id="search1"> 
       <td bgcolor="#FF0000"> 
        <select class="searchbox" name="type" style="width:140px"> 
         <option value="">choose a style.....</option> 
         <option value="beach">Beach</option> 
         <option value="city">City</option> 
        </select> 
       </td> 
       <td bgcolor="#FF0000"> 
        <input type="image" name="submit" id="submit" alt="submit" src="../images/transparent.png" width="35px" height="30px" style="background-color:#00C"> 
       </td> 
      </form> 
     </tr> 
    </table> 
</body> 
</html>

結果は、Firefox、Chromeで

この、IE9で

この、IE9 Compatibiityビューで

し、この中で次のようになります。

申し訳ありませんが、私は初心者ですが、画像を投稿することは許可されていませんが、私から取る、彼らはすべて異なっています。私はIEの古いバージョンでそれを見ることを敢えてしていない！

すべてのブラウザで、選択ボックスをボタンの中央に垂直に配置するにはどうすればよいですか？私は明らかな何かを失っているに違いありません。ロケット手術ではありません！

あなたが line-heightと vertical-alignで再生する必要があり

出典

2012-03-29 TrapezeArtist

ロケット手術？それは新しい... – Th0rndike

... そして、そこのテーブルのための本当の必要性をtheresの、うまく少なくとも投稿した簡単な例ではありません：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Untitled Document</title> 
</head> 

<body> 
<form action="" method="post" name="search1" id="search1"> 
<div style="background-color:red;padding:0;height:30px;line-height:30px;"> 
    <select class="searchbox" name="type" style="width:140px"> 
     <option value="">choose a style.....</option> 
     <option value="beach">Beach</option> 
     <option value="city">City</option> 
    </select> 
    <input type="image" name="submit" id="submit" alt="submit" src="../images/transparent.png" style="background-color:#00C;margin:0;padding:0;width:35px;height:30px;vertical-align:bottom;"> 
</div> 

</form> 

</body> 
</html>

出典

2012-03-29 10:18:22 poncha

それは面白いです。私は遠ざかり、それを試みます。私は実際のバージョンでテーブルが必要だと思うが、これは私がここで遊んでいた単純化されたバージョンよりもやや複雑だ。 – TrapezeArtist

ボタンを選択ボックスと整列する（HTMLフォーム）

答えて

関連する問題