テキストエリアの右上にスパンを配置するにはどうすればよいですか？

Question

私はid="aboutme"のテキスト領域とclass="maxlength-feedback"のスパンを持っています。テキスト領域の右上隅にスパンを配置します。テキストエリアのカウンターになります。

私は両方の要素がposition="relative"であり、スパンはdisplay="inline-block"であるべきだと知っていますが、機能しません。

私は助けていただきありがとうございます。ありがとう。

Answer 1

はちょうどこの

説明のようにそれを行う：display: block;であるあなたのdivデフォルトの動作は、お使いのスパンの流れを行います確かに今、コンテナdiv内のあなたのtextareaをラップし、コンテナにposition: relative;を与え、そしてspanからposition: absolute;極端なので、あなたのコンテナのdivのためdisplay: inline-block;を使用し、左の

Demo

HTML

<div class="wrap"> 
    <textarea></textarea> 
    <span>Counter</span> 
</div> 

CSS

.wrap { 
    position: relative; 
    display: inline-block; 
} 

.wrap span { 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

Answer 2

ない、MAXLENGTH-フィードバックabsoluteこのように、配置されなければなりません。

#aboutme { 
position:relative; 
} 

.maxlength-feedback { 
position:absolute; 
right: 0; /* or so */ 
top: 0; /* or so */ 
} 

Answer 3

Htmlの

<div> 
    <span class="mySpan">Some Text</span> 
    <textarea class="myTextArea"></textarea> 
</div> 

CSS

div{ 
    position: relative; 
    float:left; 
} 

.mySpan{ 
    position: absolute; 
    right: 0px; 
} 

実施例：http://jsfiddle.net/VSWXs/