Question

有一个带有标签的textarea和靠近它的小图像。我希望它们都放在textarea附近。但是标签后面会显示一张图片。 HTML非常简单：

<textarea cols=70 id="test" rows="6" style=""></textarea>
<label for="test" style="vertical-align:top; border: 1px solid black; float:none;">Error!</label>
<img width="20" src="plus-icon_16.png" style="margin-left: 3px; border: 1px solid black; vertical-align:bottom;" />

此处示例： http://stavki.vetko.net/new.html

感谢。

Answer 1

将标签和图像放在div中。然后，您可以根据需要正确定位它们，并且只需要将div本身相对于textarea定位。

Answer 2

解决此问题的一种方法是为span和label添加容器img，如下所示：

<textarea cols=70 rows="6"></textarea>
<span id="wrap">
    <label for="test">Error!</label>
    <img src="plus-icon_16.png"/>
</span>

然后你可以将它浮动到textarea的右边，然后绝对将两个元素放在其中。

#wrap {
    display:inline-block;
    vertical-align:top;
    position:relative; 
}

#wrap label {
    position:absolute;
    top:0;
    left:0;
}

#wrap img {
    position:absolute;
    bottom:0;
    left:0;
}

http://jsfiddle.net/dtdN9/3/

为textarea定位标签

2 个答案: