使輸入文本字段位於圖像的右側

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」 屬性。