Question

我需要在大约6个文本框旁边显示一个图像...我不想使用div标签，因为这些位置与IE / firefox等不同。是否有一种简单的方法可以在文本框旁边显示一个小图像？比如使用：在css之后？

干杯

Answer 1

使用jQuery很容易

$(".textbox").after('<img src="validation-mark.jpg" />');

这里是HTML：

<input type="text" class="textbox"></input>

<强>更新

如果你想显示/隐藏验证标记，也许你可以将它们全部声明在你旁边的HTML文本框中声明

<input type="text" id="textbox1"></input><img src="validation-mark.jpg" />
<input type="text" id="textbox2"></input><img src="validation-mark.jpg" />
<input type="text" id="textbox3"></input><img src="validation-mark.jpg" />

使用此jQuery代码显示或隐藏它们：

$("#textbox1+img").hide();
$("#textbox1+img").show();

jQuery选择器#textbox1+img表示“具有ID的元素后面的图像：textbox1”

Answer 2

风格：

label.tbimg {
    display: inline-block;
    background-image: url(http://sstatic.net/so/img/vote-accepted-on.png); center right no-repeat;
    padding-right: 30px;   /*icon width*/
}
label.noimg {
    display: inline-block;
    padding-right: 30px;   /*icon width*/
}

HTML：

<label class="tbimg"><input type="text" class="textbox"></input></label>
<label class="noimg"><input type="text" class="textbox"></input></label>
<label class="tbimg"><input type="text" class="textbox"></input></label>
<label class="tbimg"><input type="text" class="textbox"></input></label>
<label class="noimg"><input type="text" class="textbox"></input></label>
<label class="tbimg"><input type="text" class="textbox"></input></label>

Answer 3

你觉得div在每个浏览器上的位置有什么不同？如果您指的是填充等，可以尝试使用reset stylesheet。

Answer 4

为什么不把它放在一个td里？（我想这是最简单的）

e.g。

<table>
<tr>
<td><INPUT TYPE="TEXT" id="t1"></td>
<td><INPUT TYPE="TEXT" id="t2"></td>
<td><INPUT TYPE="TEXT" id="t3"></td>
<td><INPUT TYPE="TEXT" id="t4"></td>
<td><INPUT TYPE="TEXT" id="t5"></td>
<td><INPUT TYPE="TEXT" id="t6"></td>
<td><img src="myimg.jpg" /></td>
</tr>
</table>

如果需要（如果需求是这样的话），请在运行时创建它。

在文本框后显示图像？

4 个答案: