浮動小数点入力がdivに残る

Question

私は最大幅200pxのcaptcha imgを持っています。私は入力ボックスを横に置いています。入力をフロートさせようとしましたが、入力のオンタップをまだ表示していない結果が得られました。これは12行目のdiv行内にあります。あなたは、ディスプレイ使用することを検討することができます

<div id="captcha"> 
    <label>Captcha</label> 
    <div> 
    <img alt="captcha" src="captimg.php"> 
    <input class="sec" id="captcha" name="captcha" type="text" placeholder="captcha" value=""> 
    </div>      
    </div>  

Answer 1

：ここ

チェックこのスニペット

img { 
 
    width: 200px; 
 
    vertical-align: middle; 
 
} 
 
div * { 
 
    display: inline-block; 
 
} 
 
div#captcha { 
 
    line-height: 30px; 
 
    border: 1px solid; 
 
}

<div id="captcha"> 
 
    <label>Captcha</label> 
 
    <div> 
 
    <img alt="captcha" src="captimg.php"> 
 
    <input class="sec" id="captcha" name="captcha" type="text" placeholder="captcha" value=""> 
 
    </div> 
 
</div>

をインラインブロックは、それが

Answer 2

希望この回答ヘルプお役に立てば幸い

画像と入力の両方に

<div id="captcha"> 
<label>Captcha</label> 
<div> 
<img alt="captcha" src="captimg.php"> 
<input class="sec" style="width: 0px; z-index:0; height: 0px" id="captcha" name="captcha" type="text" placeholder="captcha" value=""> 
</div>      
</div> 

Answer 3

#captcha img, 
#captcha .sec { 
    float: left; 
} 

使用float left。これにより、それらが並べて表示されます。

また、コードでid="captcha"を2回使用しています。 ID's should not be repeated。