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

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 id="image_input">
    <img src="missing-image.png" />
    <input type="text" />
</div>

和CSS：

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

请注意，我将div的“name”属性更改为“id”属性。

Answer 3

尝试更改为：

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

CSS：

.img {
    display: inline-block;
}

要使高度居中，您可能需要在输入标记上使用其中一个vertical-align选项。

如：

input {
    vertical-align: middle;
}

我没有非常使用vertical-align，所以你可能需要调整一下才能使它工作，但请看这里：http://www.w3schools.com/css/pr_pos_vertical-align.asp

---

Answer 4

有两种方法可以将文本居中对齐到图像旁边。您可以将其放在列表中，并使图像成为列表样式类型。另外你可以做的就是将元素填充到中心对齐它。