cssとポジショニング

Question

私はフォーム要素テキスト入力と送信ボタンを持っています。それぞれインラインでレンダリングしようとすると、送信ボタンが入力ボタンの上に表示されます。divで2つをラップして、最大の高さは依然として同じではありませんでした。ここに私のコードは、です/ボタンをcss-持って、彼らはラインの両方で

<div class="submit_form"> 
    <input type="text" name="unique_code" class="unique_code"/> 
    <input type="image" name="submit_btn" src="/imgs/submitbg.png"/> 
</div> 


.submit_form{ 
     height:30px; 

    } 
.unique_code{ 
     background-color:#000; 
     border: 1px solid #e31e25; 
     width:250px; 
     height:25px; 
     color:#fff; 

    } 

Answer 1

ある29px-の高さはこれにあなたのCSSを変更し

：

.submit_form * 
    { 
     height: 30px; 
     display: inline; 
     vertical-align: middle; 
    } 

それが動作するようになりました。 IEとChromeでテストしました。

Answer 2

単にテキストボックスにvertical-alignを追加します。

.unique_code{ 
    vertical-align: top; 
    background-color:#000; 
    border: 1px solid #e31e25; 
    width:250px; 
    height:25px; 
    color:#fff; 
} 

Answer 3

はこれを試してみてください。

// css 
.img_fix { 
    vertical-align: text-top  
} 
// html 
<input type="image" name="submit_btn" class='img_fix' src="http://www.google.com/images/nav_logo29.png"/>