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

Question

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

両方の要素が必要position="relative"であり、スパンが である必要があることはわかっていますがdisplay="inline-block"、機能していません。

助けていただければ幸いです。ありがとう。

Answer 1

このようにしてください

説明：textareaコンテナー内をラップしてコンテナーdivに渡します。position: relative;次に、divのデフォルトの動作を確認してposition: absolute;、スパンが左端に流れるようにします。コンテナーdivに使用します。spandisplay: block;display: inline-block;

デモ

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

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/

Answer 3

いいえ、maxlength-feedbackは次のようにabsolute配置する必要があります。

#aboutme {
 position:relative;
}

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