Html 如何在 textarea 的右上角放置一个跨度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13358648/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I position a span in the top right of a textarea?
提问by behz4d
I have a text area with id="aboutme"and an span with class="maxlength-feedback", I want the span to be positioned in the top-right-hand corner of the textarea. It will be a counter for the text area.
我有一个带有 的文本区域id="aboutme"和一个带有的跨度class="maxlength-feedback"，我希望将跨度定位在文本区域的右上角。它将是文本区域的计数器。
I know both elements should have position="relative"and the span should be display="inline-block", but it's not working.
我知道这两个元素都应该有position="relative"并且跨度应该是display="inline-block"，但它不起作用。
I would appreciate any help. Thanks.
我将不胜感激任何帮助。谢谢。
回答by Mr. Alien
Just do it like this
就这样做
Explanation: Wrap your textareainside a container divand give position: relative;to the container, and position: absolute;to span, now to be sure your div default behavior which is display: block;will make your span flow on the extreme left so use display: inline-block;for your container div
说明：将您textarea的内容包裹在一个容器中，div然后交给position: relative;容器，然后position: absolute;交给span，现在要确保您的 div 默认行为display: block;将使您的跨度在最左侧流动，因此请display: inline-block;用于您的容器 div
HTML
HTML
<div class="wrap">
<textarea></textarea>
<span>Counter</span>
</div>
CSS
CSS
.wrap {
position: relative;
display: inline-block;
}
.wrap span {
position: absolute;
top: 0;
right: 0;
}
回答by Kevin Bowersox
Html
html
<div>
<span class="mySpan">Some Text</span>
<textarea class="myTextArea"></textarea>
</div>
CSS
CSS
div{
position: relative;
float:left;
}
.mySpan{
position: absolute;
right: 0px;
}
Working Example: http://jsfiddle.net/VSWXs/
工作示例：http: //jsfiddle.net/VSWXs/
回答by LorDex
no, maxlength-feedback has to be absolutepositioned, like this;
不，必须absolute像这样定位maxlength-feedback ；
#aboutme {
position:relative;
}
.maxlength-feedback {
position:absolute;
right: 0; /* or so */
top: 0; /* or so */
}
