Question

我有一个最大宽度为200px的验证码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

希望这个答案可以帮助你

<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 2

你可以考虑使用display：inline-block here

检查此代码段

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 3

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

在图像和输入上使用float left。这将使它们并排出现。

此外，您在代码中使用了id="captcha"两次。 ID's should not be repeated。

在div中留下浮动输入

3 个答案: