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

【问题标题】：How can I position a span in the top right of a textarea?如何在文本区域的右上角定位跨度？
【发布时间】：2012-11-13 09:57:58
【问题描述】：

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

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

如果有任何帮助，我将不胜感激。谢谢。

【问题讨论】：

标签： html css textarea positioning

【解决方案1】：

就这样吧

说明：将您的 textarea 包装在容器 div 中并将 position: relative; 提供给容器，并将 position: absolute; 提供给 span，现在确保您的 div 默认行为 display: block; 将使您的最左边的跨度流所以使用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;
}

【讨论】：

使用定位时不需要任何显示规则，因为它有效地将元素的显示级别设置为阻塞。
@KyleSevenoaks 看看这个jsfiddle.net/bxVPE 和这个jsfiddle.net/bxVPE/1 的区别，否则你需要定义宽度，这是一个动态宽度的方法，灵活

【解决方案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/

【讨论】：

【解决方案3】：

不，maxlength-feedback 必须是 absolute 定位，像这样；

#aboutme {
 position:relative;
}

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

【讨论】：