Question

我正在尝试在表单中的电子邮件字段旁边放置一个状态图像（如果电子邮件正确则显示勾号或交叉）。 问题是我的注册表单使用的是表格方法，因此图片不会显示在字段旁边但在其下方。任何人都可以帮助我吗？

这是我试图做的，但仍然没有按照我想要的方式工作。

<table width="500" border="0">
<tr><td width="210" height="45">Email:</td><td>
<input type="text" size="40" name="userEmail" id="userEmail" onkeyup="checkEmail(this.value);" onblur="checkEmail(this.value);" maxlength="60" />
**<img id="status" src="images/bad.png" style="margin-left:5px; vertical-align:middle;" alt="Status" /></td></tr>**
</table>

Answer 1

由于您的图像是复选标记和x，因此只需使用unicode等效项：

✔ =✔
✘ =✘

完全摆脱图像。

Answer 2

问题是因为<td>没有足够的空间来容纳文本字段和图像。

为<table>或第二<td>添加更多宽度可以解决问题。

Answer 3

现在所需要的只是适合的空间。

<table width="650px" border="0">
<tr><td width="210px" height="45">Email:</td><td>
<input type="text" size="40" name="userEmail" id="userEmail" onkeyup="checkEmail(this.value);" onblur="checkEmail(this.value);" maxlength="60" />
**<img id="status" src="https://www.google.ca/images/srpr/logo4w.png" width="125px" height="50px" style="margin-left:5px; vertical-align:middle;" alt="Status" /></td></tr>**
</table>

看看这个fiddle，包含该列的表的大小发生了变化。您可以通过增加表格宽度来减小输入宽度或增加空间。

在表单字段旁边添加状态图像

3 个答案: