テキストエリアのラベルの配置

Question

ラベルとその近くに小さなイメージがあるテキストエリアがあります。私はそれらの両方をテキストエリアのすぐ近くに配置したい。ラベルの後にイメージが表示されます。 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自体をテキストエリアに対して配置するだけで済みます。あなたはこの問題を解決することができ

Answer 2

一つの方法は、そのようlabelとimg用の容器spanを追加することです：

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

あなたはその後、テキストエリアの右側に、このフロート、そして絶対に2つの要素を配置することができますその中で。

#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/