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

【问题标题】：Making a Input Text Field Be On The Right Side Of a Image使输入文本字段位于图像的右侧
【发布时间】：2011-06-06 16:04:36
【问题描述】：

我有一个 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> 中的所有内容

【问题讨论】：

【解决方案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;
}

【讨论】：

【解决方案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”属性。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

试着改成这样：

<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

【讨论】：