如何在textarea的右上方放置一個跨度？

Question

我有id="aboutme"文本區和class="maxlength-feedback"的跨度，我想跨度被定位在textarea的頂部右上角。它將成爲文本區域的一個計數器。

我知道這兩個元素應該有position="relative"，跨度應該是display="inline-block"，但它不起作用。

我將不勝感激任何幫助。謝謝。

Answer 1

就做這樣的

說明：包裝你textarea容器div內，給position: relative;的容器，position: absolute;到span，現在可以肯定的是display: block;您的div默認行爲會讓你的跨度流最左邊所以用display: inline-block;爲您div容器

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

沒有，最大長度反饋必須被定位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/