入力テキストフィールドを画像の右側にする

Question

画像の右側に50x50の画像と<input type="text" />のフィールドがあります。

<img src="missing-image.png" /> 
<div name="image_input"> 
    <input type="text" /> 
</div> 

をそして、このCSSを：私はこれを試してみた

#image_input { 
    position: absolute; 
    top: 10px; 
} 

しかし、テキスト入力画像の右側に行くことはありません。あなたが見ることができるように、私はそれをイメージの高さで集中させ、私が見ることができるようにしてもそれはうまくいかないでしょう。どのようにこれを修正することができますか？

PS：

<div name="image_input"> 
    <img src="missing-image.png" /> 
    <input type="text" /> 
</div> 

とCSS：すべてのことは、これに変更してみてください<form>

Answer 1

ポジションはより多くの制御を与える：

HTML

<div name="image_input"> 
    <img src="missing-image.png" /> 
    <input type="text" /> 
</div> 

CSS

div { 
    position:relative; 
} 

input{ 
    position:absolute; 
    right:10px; 
    bottom:20px; 
} 

Answer 2

の内側にある

.img { 
    display: inline-block; 
} 

高さを中央に、あなたがしたい場合があります入力タグにvertical-alignオプションの1つを使用します。

など：

input { 
    vertical-align: middle; 
} 

私はあなたはそれが仕事を得るためにそれを少し微調整する必要がある場合がありますので、非常に垂直揃える使用しますが、ここでは表示されません。http://www.w3schools.com/css/pr_pos_vertical-align.asp

---

Answer 3

イメージの隣にテキストを配置するには、いくつかの方法があります。それをリストに入れ、画像をリストスタイルのタイプにすることができます。あなたがそれを適切にパッドして、それを中心に整列させることができるもう一つのこと。

<div id="image_input"> 
    <img src="missing-image.png" /> 
    <input type="text" /> 
</div> 

とCSS：

#image_input img { 
    float: left; 
    clear: none; 
} 

注意私は "id" 属性にdiv要素の "name" 属性を変更したこと

Answer 4

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