html - 如何在文本区域的右上角定位跨度？

Question

我有一个带有 的文本区域id="aboutme"和一个带有 的跨度class="maxlength-feedback"，我希望跨度位于文本区域的右上角。它将是文本区域的计数器。

我知道这两个元素都应该有position="relative"并且跨度应该是display="inline-block"，但它不起作用。

我将不胜感激任何帮助。谢谢。

Answer 1

就这样做

说明：将您的容器包裹textarea在容器中div并提供position: relative;给容器，然后再提供position: absolute;给span，以确保您的 div 默认行为display: block;将使您的 span 在最左侧流动，因此display: inline-block;请用于您的容器 div

演示

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 */
}