使输入文本字段位于图像的右侧

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：所有这一切都内<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

尝试改变这样的：

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

而CSS：

.img { 
    display: inline-block; 
} 

要居中的高度，你可能想使用输入标签上的垂直对齐选项之一。

如：

input { 
    vertical-align: middle; 
} 

我不使用垂直对齐非常多，所以你可能需要调整它一点点地得到它的工作，但在这里看到：http://www.w3schools.com/css/pr_pos_vertical-align.asp

---

Answer 3

有几种方法可将文本居中对齐图像旁边。你可以把它放在一个列表中，并使图像成为列表样式类型。另一件事，你可以正确填充元素来居中对齐它。

Answer 4

试试这个：

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

和CSS：

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

注意，我改变了div的 “名称” 属性的 “id” 属性。